/* ===== FONT DECLARATIONS ====== */

@font-face {
	font-family: 'Cooper Black';
	src: url('../fonts/cooperblackstd-webfont.woff2') format('woff2');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'Antarctica';
	src: url('../fonts/Antarctica-Regular.woff2') format('woff2');
	font-weight: normal;
	font-style: normal;
}

/* Global font variables */

:root {
	--font-primary: "Cooper Black", -apple-system, system-ui, sans-serif;
	--font-secondary: "Antarctica", Arial, Helvetica, sans-serif;

	--font-monospace: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;

	--text-large: 1.25rem;
	--text-regular: 1rem;
	--text-small: 0.875rem;

	--heading-x-large: 2.5rem;
	--heading-large: 2rem;
	--heading-regular: 1.75rem;
	--heading-medium: 1.5rem;
	--heading-small: 1.25rem;
	--heading-x-small: 1.125rem;
}

/* ===== END FONT DECLARATIONS ====== */
*, *::before, *::after {
	box-sizing: border-box;
}

* {
	margin: 0;
}

:root {
	--site-width: 48em;
	--site-width-max: 80em;
	--syntax-tab-size: 2;

	--color-gray-20: #e0e0e0;
	--color-gray-50: #C0C0C0;
	--color-gray-90: #333;

	--theme-color: #F4F5F7;
	--background-color: var(--theme-color);
	--text-color: #121212;

	--text-color-link: #68B75C;
	--text-color-link-active: #156842;
	--text-color-link-visited: #68B75C;

	--border-color: #e0e0e0;
	--accent-color: #68B75C;

	/* Sidebar variables */
	--sidebar-bgd-color: #f5f5f5;
	--sidebar-border-color: #e0e0e0;

	/* Card variables */
	--star-rating-color: #68B75C;

	/* Pagination trigger variables */

}

[data-theme="dark"] {
	--color-gray-20: #e0e0e0;
	--color-gray-50: #C0C0C0;
	--color-gray-90: #dad8d8;

	--theme-color: #373C36;

	--background-color: var(--theme-color);
	--text-color: #f5f5f5;

	--text-color-link: #4da6ff;
	--text-color-link-active: #0077cc;
	--text-color-link-visited: #4da6ff;

	--border-color: #a8a8a8; /* #2e2e2e; */
	--accent-color: #f5f5f5;

	/* Sidebar variables */
	--sidebar-bgd-color: #4f554f;
	--sidebar-border-color: #444444;

	/* Card variables */
	--star-rating-color: #ffd700;

	/* Pagination trigger variables */

}

@media (prefers-reduced-motion: no-preference) {
	html {
		interpolate-size: allow-keywords;
	}
}

img, picture, video, canvas, svg {
	display: block;
	max-width: 100%;
}

input, button, textarea, select {
	font: inherit;
}

p, h1, h2, h3, h4, h5, h6 {
	overflow-wrap: break-word;
}

p {
	text-wrap: pretty;
}

h1, h2, h3, h4, h5, h6 {
	text-wrap: balance;
}

#root, #__next {
	isolation: isolate;
}


/* Defaults */

@view-transition {
	navigation: auto;
}
@media (prefers-reduced-motion: reduce) {
	@view-transition {
		navigation: none;
	}
}
html, body {
	padding: 0;
	margin: 0 auto;
}
body {
	max-width: var(--site-width-max);
}
html {
	overflow-y: scroll;
}
code {
	word-break: break-all;
}
/* ===== THEME SWITCHING COMPONENTS ===== */

/* Avatar switching */
#profile-pic {
	transition: all 0.3s ease;
	width: 50px;
	height: 50px;
	border-radius: 50%;
}

.avatar-light {
	display: block;
}

.avatar-dark {
	display: none;
}

[data-theme="dark"] .avatar-light {
	display: none;
}

[data-theme="dark"] .avatar-dark {
	display: block;
}

/* Default stroke colors for each theme */
:root #profile-pic {
	/* --avatar-light-stroke: #000;    Default stroke for light avatar */
	--avatar-dark-fill: none;    /* Default stroke for dark avatar */
	--avatar-dark-fill-accent: #cecece;
}

/* Light theme hover */
:root #profile-pic:hover {
	filter: hue-rotate(-15deg);
	transform: rotate(-2deg) scale(1.08);
	transition: all 0.3s ease;
}

/* Dark theme hover */
[data-theme="dark"] #profile-pic:hover {
	--avatar-dark-fill: #fff;
	transform: rotate(-2deg) scale(1.08);
	transition: all 0.3s ease;
}

/* Theme toggle button */
.theme-switch {
	background: var(--theme-color);
	color: var(--text-color);
	border: 0;
	border-radius: 50%;
	width: 24px;
	height: 24px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	padding: 0;
	transition: background 0.3s ease;
}

.theme-switch:hover {
	background: var(--border-color);
}

/* Theme icon container */
.theme-icon {
	transition: transform 0.5s ease, opacity 0.25s ease;
	display: inline-block;
	width: 16px;
	height: 16px;
	color: var(--accent-color); /* This will be used by currentColor in the SVG */
}

/* Rotation effect during theme change */
[data-theme="dark"] .theme-icon {
	transform: rotate(360deg);
}

/* Sun - Moon icon switching */

/* Show moon in light theme, hide sun */
:root .sun-icon {
	display: none;
}

:root .moon-icon {
	display: block;
}

/* Show sun in dark theme, hide moon */
[data-theme="dark"] .sun-icon {
	display: block;
}

[data-theme="dark"] .moon-icon {
	display: none;
}

/* ===== END THEME SWITCHING COMPONENTS ===== */
/* ===== LAYOUT SYSTEM ===== */

/* Content Container */
main {
	max-width: var(--site-width);
	margin: 0 auto;
	position: relative;
	padding: 1rem;
}
main :first-child {
	margin-top: 0;
}

/* Spacing Utilities */
.mt-0 { margin-top: 0; }
.mt-1 { margin-top: 0.5rem; }
.mt-2 { margin-top: 1rem; }
.mt-3 { margin-top: 1.5rem; }
.mt-4 { margin-top: 2rem; }

.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: 0.5rem; }
.mb-2 { margin-bottom: 1rem; }
.mb-3 { margin-bottom: 1.5rem; }
.mb-4 { margin-bottom: 2rem; }


/* Header and Footer */
header {
	display: flex;
	gap: 1em;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: flex-end;
	padding: 1em;
}
header {
	border-bottom: 1px dashed var(--color-gray-20);
}

footer {
	bottom: 0;
	left: 0;
	right: 0;
	border: 0;
	height: 100px;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	vertical-align: baseline;
/*	background-color: var(--sidebar-bgd-color); */
	transition: background 0.3s ease;
}
.footer-container {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	width: 100%;
	max-width: calc(var(--site-width) + 4rem);
	margin: 0 auto;
	padding: 0;
}

/* Main nav */
.nav-items, .footer-meta, .tag-list {
	display: flex;
	gap: .5em 1em;
	padding: 0;
	margin: 0;
	list-style: none;
}
.nav-item {
	display: inline-block;
}
.nav-item a[href]:not(:hover) {
	text-decoration: none;
}
.nav-items a[href][aria-current="page"] {
/*	text-decoration: underline; */
	background-color: var(--accent-color);
	color: var(--background-color);
}
.nav-items li:last-child {
	margin-left: 2px;
}
.nav-item a[href] {
	padding: 0.25rem 0.5rem;
	border: 1px solid var(--accent-color);
	border-radius: 4px;
	background: transparent;
	color: var(--accent-color);
	font-weight: 500;
	transition: all 0.3s ease;
}
.nav-item a[href]:not(:hover) {
	background-color: var(--background-color);
	color: var(--accent-color);
}
.nav-item a[href]:hover {
	background-color: var(--accent-color);
	color: var(--background-color);
}

/* Lists */
ul, ol {
	margin: 0 0 1.5rem 0;
	padding-left: 1.5rem;
	font-family: var(--font-secondary), sans-serif;
	line-height: 1.5;
}
li:not(.nav-item) {
	margin-bottom: 0.5rem;
	line-height: 1.5;  /* 1.5 */
}

.tag-list li {
	margin: 0;
	white-space: nowrap;
}


/* Fluid images via https://www.zachleat.com/web/fluid-images/ */
img[width][height] {
	height: auto;
}
img[src$=".svg"] {
	width: 100%;
	height: auto;
	max-width: none;
}
video,
iframe {
	width: 100%;
	height: auto;
}
iframe {
	aspect-ratio: 16/9;
}

/* Tables */
table {
	margin: 1em 0;
}
table td,
table th {
	padding-right: 1em;
}

/* Sidebar Styles */

#sidebar {
	background-color: var(--sidebar-bgd-color);
	border: 1px solid var(--sidebar-border-color);
	transition: background-color 0.3s ease, border-color 0.3s ease;
	float: right;
	width: 30%;
	padding: 20px;
	height: 100%;
}

#sidebar h2, #sidebar h3 {
	font-weight: 600;
	margin-bottom: 1rem;
	color: var(--text-color);
}

#sidebar h2 {
	font-size: 1.5rem;
	border-bottom: 2px solid var(--sidebar-border-color);
	padding-bottom: 1rem;
	margin-top: 1rem;  /* ← Add this to override the global 2rem top margin */
}

#sidebar h3 {
	font-size: 1.25rem;
	border-bottom: 1px solid var(--sidebar-border-color);
	padding-bottom: 0.5rem;
}

.sidebar-section {
	margin-bottom: 2rem;
}

.sidebar-section:last-child {
	margin-bottom: 0;
}

#sidebar p {
	font-size: 0.9rem;
	line-height: 1.5;
	margin-bottom: 1rem;
}

#sidebar a {
	color: var(--text-color-link);
	text-decoration: none;
	transition: color 0.2s ease;
}

#sidebar a:hover {
	color: var(--text-color-link-active);
}

/* NP Links */

.links-nextprev {
	display: flex;
	justify-content: space-between;
	gap: .5em 1em;
	list-style: "";
	border-top: 1px dashed var(--color-gray-20);
	padding: 1em 0;
}
.links-nextprev > * {
	flex-grow: 1;
}
.links-nextprev-next {
	text-align: right;
}

/* Hidden links and Skip links */

/* https://www.a11yproject.com/posts/how-to-hide-content/ */
.visually-hidden:not(:focus):not(:active) {
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	height: 1px;
	overflow: hidden;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}
#skip-link {
	text-decoration: none;
	background: var(--background-color);
	color: var(--text-color);
	padding: 0.5rem 1rem;
	border: 1px solid var(--color-gray-90);
	border-radius: 2px;
}
/* Prevent visually-hidden skip link fom pushing content around when focused */
#skip-link.visually-hidden:focus {
	position: absolute;
	top: 1rem;
	left: 1rem;
	/* Ensure it is positioned on top of everything else when it is shown */
	z-index: 999;
}

/* Filter buttons */
.filters {
	display: flex;
	gap: 0.5rem;
	margin-bottom: 2rem;
	flex-wrap: wrap;
}
.filter-btn, .tag-item {
	padding: 0.25rem 0.75rem;
	border: 1px solid var(--accent-color);
	border-radius: 4px;
	background: transparent;
	font-family: var(--font-primary), sans-serif;
	font-size: var(--text-regular);
	color: var(--accent-color);
	font-weight: 300;
	transition: all 0.3s ease;
	cursor: pointer;
	position: relative;
}
.filter-btn:hover {
	background-color: var(--accent-color);
	color: var(--background-color);
}
.filter-btn.active {
	background-color: var(--accent-color);
	color: var(--background-color);
}





/* Tag List Styles */

.tag-list {
	display: inline-flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	align-items: center;
}

.tag-list li {
	margin: 0;
	white-space: nowrap;
}

.tag-item {
	display: inline-block;
	font-family: var(--font-secondary), sans-serif;
	font-size: var(--text-small);
	font-weight: 300;
	padding: 0.1rem 0.5rem;
	border: 1px solid var(--accent-color);
	border-radius: 20px;
	background: transparent;
	transition: all 0.3s ease;
	cursor: pointer;
	position: relative;
	text-decoration: none;
	color: var(--accent-color) !important; /* Override global link color */
}

.tag-item:visited {
	color: var(--accent-color) !important; /* Override global link visited color */
}

.tag-item:not(:hover) {
	background-color: var(--sidebar-bgd-color);
	color: var(--accent-color) !important;
}

.tag-item:hover,
.tag-item:active {
	background-color: var(--accent-color);
	color: var(--background-color) !important; /* Override global link hover color */
}

/* Footnotes */

.footnotes {
	font-size: var(--text-small);
	line-height: 1.5;
	margin-top: 2rem;
}



/* ===== END LAYOUT SYSTEM ===== */
/* ===== TYPOGRAPHY SYSTEM ===== */

	/* Base Typography */
	body {
		line-height: 1.6;
		-webkit-font-smoothing: antialiased;
		background-color: var(--background-color);
		color: var(--text-color);
		transition: background-color 0.3s ease, color 0.3s ease;
		font-family: var(--font-secondary), sans-serif;
		font-size: var(--text-regular);
	}

	header .nav-items {
		font-family: var(--font-primary), sans-serif;
		text-decoration: none;
		font-size: var(--text-regular);
	}

	footer {
		color: var(--text-color);
		font-family: var(--font-secondary), sans-serif;
		font-size: var(--text-small);
	}

	/* Headings Hierarchy */
	h1, h2, h3, h4, h5, h6 {
		font-family: var(--font-primary), sans-serif;
		font-weight: 700;
		line-height: 1.2;
		margin: 2rem 0 1rem 0;
		color: var(--text-color);
	}

	h1 { font-size: var(--heading-x-large); margin-top: 0; }
	h2 { font-size: var(--heading-large); }
	h3 { font-size: var(--heading-regular); }
	h4 { font-size: var(--heading-medium); }
	h5 { font-size: var(--heading-small); }
	h6 { font-size: var(--heading-x-small); }

	/* Responsive Typography */
	@media (max-width: 768px) {
		h1 { font-size: var(--heading-large); }
		h2 { font-size: var(--heading-regular); }
		h3 { font-size: var(--heading-medium); }
		h4 { font-size: var(--heading-small); }
		h5 { font-size: var(--heading-x-small); }
		h6 { font-size: 1rem; }
	}

	/* Paragraph and Text */
	p {
		font-family: var(--font-secondary), sans-serif;
		margin: 0 0 1.5rem 0;
		line-height: 1.7; /* or 1.5 from index.css */
	}
	p:last-child {
		margin-bottom: 0;
	}

	/* Links */
	a[href] {
		color: var(--text-color-link);
		text-decoration: none;
		transition: color 0.2s ease;
	}
	a[href]:visited {
		color: var(--text-color-link-visited);
	}
	a[href]:hover, a[href]:active {
		color: var(--text-color-link-active);
	}

	/* Emphasis and Strong */
	em {
		font-style: italic;
	}

	strong {
		font-weight: 600;
	}

	/* Code */
	pre, code {
		font-family: var(--font-monospace), monospace;
	}
	pre:not([class*="language-"]) {
		margin: .5em 0;
		line-height: 1.375; /* 22px /16 */
		-moz-tab-size: var(--syntax-tab-size);
		-o-tab-size: var(--syntax-tab-size);
		tab-size: var(--syntax-tab-size);
		-webkit-hyphens: none;
		-ms-hyphens: none;
		hyphens: none;
		direction: ltr;
		text-align: left;
		white-space: pre;
		word-spacing: normal;
		word-break: normal;
		overflow-x: auto;
	}

	/* Blockquotes */
	blockquote {
		font-family: var(--font-secondary), sans-serif;
		margin: 2rem 0;
		padding: 1rem 1.5rem;
		border-left: 4px solid #e5e7eb;
		background-color: #f9fafb;
		font-style: italic;
		color: #6b7280;
	}

/* ===== END TYPOGRAPHY SYSTEM ===== */
/* ===== HTMX INDICATOR ===== */

/* HTMX loading indicator */
.filter-btn .htmx-indicator {
	position: absolute;
	right: -20px;
	top: 50%;
	transform: translateY(-50%);
	font-size: var(--text-small);
}

/* ===== END HTMX INDICATOR ===== */
.feeds-index {
	max-width: 60rem;
	margin: 0 auto;
	padding: 2rem;
}
.feed-options {
	display: grid;
	gap: 2rem;
	margin: 2rem 0;
}
.feed-option {
	padding: 1.5rem;
	border: 1px solid var(--sidebar-border-color);
	border-radius: 0.5rem;
	background: var(--sidebar-bgd-color);
}
.feed-option code {
	padding: 0.2rem 0.4rem;
	border-radius: 0.2rem;
	font-size: var(--text-regular);
}
/* ===== NOTES-SPECIFIC STYLES ===== */

/* To be included in post.njk CSS bundle only */

/* Posts list */
.postlist {
	counter-reset: start-from var(--postlist-index);
	list-style: none;
	padding: 0;
	padding-left: 1.5rem;
}
.postlist-item {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	counter-increment: start-from -1;
	margin-bottom: 1em;
}
.postlist-item:before {
	display: inline-block;
	pointer-events: none;
	content: "" counter(start-from, decimal-leading-zero) ". ";
	line-height: 100%;
	text-align: right;
	margin-left: -1.5rem;
}
.postlist-date,
.postlist-item:before {
	font-size: 0.8125em; /* 13px /16 */
	color: var(--color-gray-90);
}
.postlist-date {
	word-spacing: -0.5px;
}
.postlist-link {
	font-size: 1.1875em; /* 19px /16 */
	font-weight: 700;
	flex-basis: calc(100% - 1.5rem);
	padding-left: .25em;
	padding-right: .5em;
	text-underline-position: from-font;
	text-underline-offset: 0;
	text-decoration-thickness: 1px;
}
.postlist-item-active .postlist-link {
	font-weight: bold;
}

/* Tags */
.post-tag {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-transform: capitalize;
	font-style: italic;
}
.postlist-item > .post-tag {
	align-self: center;
}

/* Tags list */
.post-metadata {
	display: inline-flex;
	flex-wrap: wrap;
	gap: .5em;
	list-style: none;
	padding: 0;
	margin: 0;
}
.post-metadata time {
	margin-right: 1em;
}































/* Styles below from Django app */
/* Post Detail Layout */
.post-detail {
	max-width: 65ch;
	margin: 0 auto;
	padding: 2rem 1rem;
}

/* Post Header */
.post-header {
	margin-bottom: 3rem;
	padding-bottom: 1.5rem;
	border-bottom: 1px solid var(--border-color);
}

.post-title {
	margin-bottom: 1rem;
}

.post-meta {
	display: flex;
	gap: 0.5rem;
	align-items: center;
	font-size: 0.875rem;
	color: var(--text-muted);
	margin: 0;
}

.post-date {
	font-weight: 500;
}

.post-author {
	position: relative;
}

.post-author::before {
	content: "•";
	margin-right: 0.5rem;
	color: var(--border-color);
}

/* Post Content */
.post-content {
	margin-bottom: 2rem;
	font-size: 1.125rem;
	line-height: 1.7;
}

/* Post Tags */
.post-tags {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.5rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--border-color);
	margin-top: 1rem;
}

.tags-label {
	font-size: 0.875rem;
	color: var(--text-muted);
	font-weight: 500;
	margin: 0;
	padding: 0;
}

.tag {
	display: inline-block;
	padding: 0.25rem 0.75rem;
	background-color: var(--tag-bg);
	color: var(--tag-color);
	text-decoration: none;
	border-radius: 9999px;
	font-size: 0.875rem;
	font-weight: 500;
	transition: all 0.2s ease;
	line-height: 1.2;
}

/* Related Posts in Sidebar */
.related-posts-list {
	list-style: none;
	padding: 0;
	margin: 0;
}

.related-posts-list li {
	margin-bottom: 0.75rem;
	border-bottom: 1px solid var(--border-color);
	padding-bottom: 0.75rem;
}

.related-posts-list li:last-child {
	border-bottom: none;
	padding-bottom: 0;
	margin-bottom: 0;
}

.related-post-link {
	font-weight: 500;
	transition: color 0.2s ease;
	display: block;
	line-height: 1.4;
	font-size: 0.9rem;
}

.related-post-link:hover {
	color: var(--accent-color);
}

/* Responsive Design */
@media (max-width: 768px) {
	.post-detail {
		padding: 1.5rem 1rem;
	}

	.post-content {
		font-size: 1rem;
	}

	.post-meta {
		flex-direction: column;
		align-items: flex-start;
		gap: 0.25rem;
	}

	.post-author::before {
		display: none;
	}
}

/* ===== NOTES-SPECIFIC STYLES ===== */
/* Books-specific styles */

/* Book list grid */

.book-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr); /* 4 equal columns */
	/* grid-template-columns: repeat(auto-fill, 192px); minmax(180px, 1fr)); */
	grid-gap: 2rem;
	margin: 2rem 0;
}

/* Responsive adjustments */
@media (max-width: 768px) {
	.book-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 480px) {
	.book-grid {
		grid-template-columns: 1fr;
	}
}

/* Book card */

.book-card {
	border-radius: 8px;
	overflow: hidden;
	box-shadow: 0 2px 8px rgba(255, 255, 255, 0.3);
	transition: transform 0.3s ease, box-shadow 0.3s ease;
	background: #fff;
	position: relative;
	height: 160px; /* 260px */
}

[data-theme="dark"] .book-card {
	background: #2a2a2a;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3)
}

.book-card a {
	display: block;
	text-decoration: none;
	color: inherit;
	height: 100%;
	position: relative;
}

.book-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 5px 15px #000;
}

/* Book cover */

.book-cover {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
}

.book-cover img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Book status icon */

.book-status {
	position: absolute;
	top: 0.5rem;
	right: 0.5rem;
	padding: 0.1rem;
	z-index: 3;
}

.book-status-icon {
	width: 20px;
	height: 20px;
	transition: filter 0.3s ease;
}

[data-theme="light"] .book-card:hover .book-status-icon {
	filter: invert(1);
}

[data-theme="light"] .book-data-value .book-status-icon {
	filter: invert(1);
}


/* Book info overlay */

.book-data {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(255, 255, 255, 0.8);
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	align-items: flex-start;
	padding: 0 1rem;
	opacity: 0;
	transition: opacity 0.3s ease;
	z-index: 2;
}

[data-theme="dark"] .book-data {
	background: rgba(0, 0, 0, 0.8);
}

.book-card:hover .book-data {
	opacity: 1;
}

.book-title {
	margin: 0 0 0.5rem 0;
	font-family: var(--font-primary), sans-serif;
	font-size: var(--text-regular);
	line-height: 1.3;
	color: var(--text-color);
	text-align: left;
	font-weight: bold;
}

p.book-author {
	margin: 0 0 0.75rem 0;
	font-size: var(--text-small);
	color: var(--text-color);
	text-align: left;
}

.book-meta {
	margin: 0 0 0.25rem 0;
}

.book-rating {
	display: inline-block;
	font-size: 0.9rem;
	color: var(--star-rating-color);
	white-space: nowrap;
}

[data-theme="dark"] .book-rating {
	color: var(--star-rating-color);
}

.book-data-label {
	font-weight: bold;
	color: var(--color-gray-90);
	text-align: right;
	white-space: nowrap;
}
.book-data-value {
	color: var(--text-color);
}

.book-data-sheet {
	display: grid;
	grid-template-columns: 1fr 2fr;
	grid-gap: 2rem;
	margin-bottom: 2rem;
	background: var(--sidebar-bgd-color);
}

.book-info-sheet {
	padding: 1.5rem;
	border-radius: 8px;
}

.book-data-grid {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 0.5rem 1rem;
	align-items: center;
	margin-bottom: 1rem;
}