:root {
	--creamy: #d8cdb7;
	--dark-green: #303d10;
}

.grecaptcha-badge {
	display: none !important;
}

.initial-hide {
	opacity: 0;
	pointer-events: none;
	transform: translateY(20px);
}

.logo-holder {
	background-color: #108315;
	border-radius: 50%;
	width: 150px;
	height: 150px;
	align-items: center;
	margin: auto;
	margin-bottom: 10px;
}

.page-analyse .accordion-content {
	max-height: 0;
	transition: max-height 0.3s ease-in-out;
	overflow: hidden;
	height: auto;
}

.page-analyse .accordion-content.open {
	max-height: 450px;
}

.page-mood {
	ul {
		list-style-type: none;
	}

	.month {
		ul {
			margin: 0;
			padding: 0;
			display: grid;
			grid-template-columns: 1fr 1fr 1fr 1fr;
			grid-template-rows: 1fr;
			li {
				color: white;
				font-size: 20px;
				text-transform: uppercase;
				letter-spacing: 3px;
			}
		}
	}

	#weekdays {
		margin: 0;
		background: #ebf6d3;
		border-bottom: 1px solid;
		li {
			color: #666;
			text-align: center;
		}
	}

	#days {
		margin: 0;
		li {
			list-style-type: none;
			text-align: center;
			font-size: 16px;
			color: #303d10;
			padding: 15px;
			margin: 3px;
			border: 1px solid #ccc;
			cursor: pointer;
			&.empty {
				border: none;
				cursor: default;
			}
			&.today {
				background: rgb(48, 61, 16);
				color: white !important;
			}
		}
	}

	#days,
	#weekdays {
		display: grid;
		grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
		grid-template-rows: 1fr;
	}

	#next,
	#prev {
		cursor: pointer;
	}

	@media screen and (max-width: 720px) {
		.page-mood .weekdays li,
		.page-mood #days li {
			width: 13.1%;
		}
	}

	@media screen and (max-width: 420px) {
		.page-mood .weekdays li,
		.page-mood #days li {
			width: 12.5%;
		}
		.page-mood #days li .today {
			padding: 2px;
		}
	}

	@media screen and (max-width: 290px) {
		.page-mood .weekdays li,
		.page-mood #days li {
			width: 12.2%;
		}
	}

	@media all and (-ms-high-contrast: none) {
		#days {
			display: -ms-grid;
			-ms-grid-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
			-ms-grid-rows: 1fr 1fr 1fr 1fr 1fr 1fr;
		}
	}
}

.glass {
	background: rgba(255, 255, 255, 0.08);
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
	border: 1px solid rgba(255, 255, 255, 0.15);
}

.glass-dark-green {
	background: rgb(48, 61, 16, 0.08);
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
	border: 1px solid rgb(48, 61, 16, 0.08);
}

/* style.css */
@import url("https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,300;9..144,400;9..144,500;9..144,700&family=Caveat:wght@400;600&family=EB+Garamond:ital,wght@0,400;0,500;1,400&display=swap");

:root {
	--sage: #7d8f6f;
	--sage-deep: #4f5e44;
	--sage-soft: #aebca0;
	--cream: #f1e9d2;
	--ink: #2f3a2a;
	--rust: #a45a3a;
	--gold: #c69a3a;
	--paper: #ede3c6;
}

/* Organic Background Texture */
.bg-journal-grain {
	background-image: radial-gradient(
			circle at 12% 18%,
			rgba(125, 143, 111, 0.1) 0 1.5px,
			transparent 2px
		),
		repeating-linear-gradient(
			45deg,
			rgba(125, 143, 111, 0.03) 0 1px,
			transparent 1px 22px
		),
		linear-gradient(180deg, #f3ead2 0%, #ece2c2 100%);
	background-attachment: fixed;
}

/* Global Noise Overlay */
.noise-overlay::before {
	content: "";
	position: fixed;
	inset: 0;
	pointer-events: none;
	z-index: 50;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.6' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.2 0 0 0 0 0.18 0 0 0 0 0.12 0 0 0 0.15 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
	mix-blend-mode: multiply;
	opacity: 0.4;
}

/* Lined Paper Effect for Summary */
.summary-lined {
	background: linear-gradient(
			180deg,
			rgba(255, 253, 240, 0.8),
			rgba(247, 238, 210, 0.8)
		),
		repeating-linear-gradient(
			0deg,
			transparent 0 27px,
			rgba(125, 143, 111, 0.1) 27px 28px
		);
}

/* Perspective styling for JS Tilt */
.polaroid {
	transform-style: preserve-3d;
	will-change: transform;
}

.page-analyse #analysis ul {
	overflow: hidden;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
}

/* Clean up the scrollbar to stay within the aesthetic */
.scrollbar-hide::-webkit-scrollbar {
	width: 4px;
}
.scrollbar-hide::-webkit-scrollbar-track {
	background: transparent;
}
.scrollbar-hide::-webkit-scrollbar-thumb {
	background: #303d10;
	border-radius: 10px;
}

.page-analyse .analysis-modal a,
.page-analyse .analysis-card a {
	text-decoration-line: underline;
}

/* ── Prose Insight (Markdown inside modal) ── */
.prose-insight h1,
.prose-insight h2,
.prose-insight h3,
.prose-insight h4,
.prose-insight h5,
.prose-insight h6 {
	font-family: "Cinzel", serif;
	color: #d4b87a;
	margin-top: .75em;
	margin-bottom: 0.5em;
}

.prose-insight h1 {
	font-size: 1.75rem;
}
.prose-insight h2 {
	font-size: 1.5rem;
}
.prose-insight h3 {
	font-size: 1.25rem;
}
.prose-insight h4 {
	font-size: 1.125rem;
}

.page-insights .prose-insight p {
	margin-bottom: 1em;
	line-height: 1.5;
}

.prose-insight strong {
	color: #d4b87a;
	font-weight: 600;
}

.prose-insight em {
	color: rgba(216, 205, 183, 0.95);
}

.prose-insight a {
	color: #d4b87a;
	text-decoration: underline;
	text-underline-offset: 3px;
	transition: color 0.3s;
}

.prose-insight a:hover {
	color: #bfa161;
}

.prose-insight ul,
.prose-insight ol {
	padding-left: 1.5em;
	margin-bottom: 1em;
}

.prose-insight ul {
	list-style-type: disc;
}

.prose-insight ol {
	list-style-type: decimal;
}

.prose-insight li {
	margin-bottom: 0.5em;
	line-height: 1.7;
}

.prose-insight li::marker {
	color: #c8a96e;
}

.prose-insight blockquote {
	border-left: 3px solid rgba(200, 169, 110, 0.4);
	padding-left: 1em;
	margin: 1.5em 0;
	font-style: italic;
	color: rgba(216, 205, 183, 0.8);
}

.prose-insight code {
	font-family: "Cormorant Garamond", serif;
	background: rgba(255, 255, 255, 0.07);
	padding: 0.15em 0.4em;
	border-radius: 4px;
	font-size: 0.95em;
	color: #d4b87a;
}

.prose-insight pre {
	background: rgba(0, 0, 0, 0.25);
	border: 1px solid rgba(200, 169, 110, 0.15);
	border-radius: 12px;
	padding: 1em 1.25em;
	margin: 1.5em 0;
	overflow-x: auto;
}

.prose-insight pre code {
	background: transparent;
	padding: 0;
}

.prose-insight hr {
	border: none;
	height: 1px;
	background: linear-gradient(to right, transparent, #c8a96e, transparent);
	margin: 2em 0;
}

.prose-insight table {
	width: 100%;
	border-collapse: collapse;
	margin: 1.5em 0;
}

.prose-insight th {
	font-family: "Cinzel", serif;
	color: #d4b87a;
	text-align: left;
	padding: 0.75em;
	border-bottom: 2px solid rgba(200, 169, 110, 0.3);
}

.prose-insight td {
	padding: 0.75em;
	border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.prose-insight > *:first-child {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* ── Scrollbar hide ── */
.scrollbar-hide::-webkit-scrollbar {
	display: none;
}

.scrollbar-hide {
	-ms-overflow-style: none;
	scrollbar-width: none;
}

/* Toolbar */
.ql-toolbar.ql-snow {
    border: none !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    padding: 12px 16px !important;
}

.ql-toolbar .ql-stroke {
    stroke: rgba(255, 255, 255, 0.4) !important;
}

.ql-toolbar .ql-fill {
    fill: rgba(255, 255, 255, 0.4) !important;
}

.ql-toolbar .ql-picker-label {
    color: rgba(255, 255, 255, 0.4) !important;
}

.ql-toolbar button:hover .ql-stroke,
.ql-toolbar button.ql-active .ql-stroke {
    stroke: #C8A96E !important;
}

.ql-toolbar button:hover .ql-fill,
.ql-toolbar button.ql-active .ql-fill {
    fill: #C8A96E !important;
}

.ql-toolbar .ql-picker-label:hover,
.ql-toolbar .ql-picker-label.ql-active {
    color: #C8A96E !important;
}

/* Editor */
.ql-container.ql-snow {
    border: none !important;
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.25rem;
}

.ql-editor {
    color: #ffffff;
    padding: 20px 24px !important;
    line-height: 1.8;
}

.ql-editor.ql-blank::before {
    color: rgba(255, 255, 255, 0.3) !important;
    font-style: italic !important;
    font-family: 'Cormorant Garamond', serif !important;
    font-size: 1.25rem !important;
}

/* Editor headings */
.ql-editor h1 {
    font-family: 'Cinzel', serif !important;
    color: #C8A96E !important;
    font-size: 1.75rem !important;
    margin-bottom: 0.5em !important;
}

.ql-editor h2 {
    font-family: 'Cinzel', serif !important;
    color: #C8A96E !important;
    font-size: 1.4rem !important;
    margin-bottom: 0.5em !important;
}

/* Blockquote */
.ql-editor blockquote {
    border-left: 3px solid #C8A96E !important;
    padding-left: 16px !important;
    color: rgba(255, 255, 255, 0.7) !important;
    font-style: italic !important;
}

/* Links */
.ql-editor a {
    color: #C8A96E !important;
    text-decoration: underline !important;
}

/* Lists */
.ql-editor ol li,
.ql-editor ul li {
    color: #ffffff !important;
}

.ql-tooltip {
    background: rgba(30, 40, 30, 0.95) !important;
    border: 1px solid rgba(200, 169, 110, 0.3) !important;
    border-radius: 12px !important;
    color: #ffffff !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4) !important;
    padding: 8px 14px !important;
}

.ql-tooltip input[type="text"] {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 8px !important;
    color: #ffffff !important;
    padding: 6px 10px !important;
}

.ql-tooltip .ql-action,
.ql-tooltip .ql-remove {
    color: #C8A96E !important;
}

.ql-editor::-webkit-scrollbar {
    width: 4px;
}

.ql-editor::-webkit-scrollbar-thumb {
    background: rgba(200, 169, 110, 0.3);
    border-radius: 4px;
}

#birth-month option,
#birth-day option,
#birth-year option {
    background: #1a2a1a;
    color: #ffffff;
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.1rem;
    padding: 8px 12px;
}

*::-webkit-scrollbar {
    min-width: 24px;
}

*::-webkit-scrollbar-track {
    background: url('./scrollbar-track.png') repeat-y center;
    background-size: 200px auto;
}

*::-webkit-scrollbar-thumb {
    background: url('./scrollbar-thumb.png') center;
	background-size: 24px cover;
}

*::-webkit-scrollbar-thumb:hover {
    filter: brightness(1.3);
}

*::-webkit-scrollbar-button:start:decrement {
    display: block;
    height: 24px;
    background: url('./scrollbar-arrow-up.png') no-repeat center;
    background-size: 24px 24px;
}

*::-webkit-scrollbar-button:end:increment {
    display: block;
    height: 24px;
    background: url('./scrollbar-arrow-down.png') no-repeat center;
    background-size: 24px 24px;
}

*::-webkit-scrollbar-button:start:decrement:hover,
*::-webkit-scrollbar-button:end:increment:hover {
    filter: brightness(1.3);
}

*::-webkit-scrollbar-corner {
    background: transparent;
}

.scrollbar-hide {
    scrollbar-width: none;
}

.scrollbar-hide::-webkit-scrollbar {
    display: none;
}