/* ─────────────────────────────────────────────
   digital flaneur — shared stylesheet
   ───────────────────────────────────────────── */

/* ── 1. Custom Properties ── */
:root {
	/* colors */
	--bg-primary:     #0a0e1a;
	--bg-secondary:   #111827;
	--bg-sidebar:     #0d1117;

	--text-primary:   #e2e8f0;
	--text-secondary: #64748b;
	--text-accent:    #7dd3fc;
	--text-title:     #c4e1f6;

	--border-color:   #1e293b;

	/* glow — two-layer: tight bloom + wide diffuse */
	--glow-tight:     0 0 8px  rgba(125, 211, 252, 0.3);
	--glow-diffuse:   0 0 24px rgba(125, 211, 252, 0.12);
	--glow-shadow:    var(--glow-tight), var(--glow-diffuse);

	/* sidebar */
	--sidebar-width:     16rem;
	--sidebar-collapsed: 2.25rem; /* just wide enough for the chevron */

	/* spacing */
	--space-xs:  0.25rem;
	--space-sm:  0.5rem;
	--space-md:  1rem;
	--space-lg:  1.5rem;
	--space-xl:  2rem;
	--space-2xl: 3rem;

	/* typography */
	--font-mono: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace;
	--font-sans: 'Inter', system-ui, sans-serif;

	--text-xs:   0.75rem;
	--text-sm:   0.875rem;
	--text-base: 1rem;
	--text-lg:   1.25rem;
	--text-xl:   1.75rem;
	--text-2xl:  2.25rem;

	/* transitions */
	--transition-fast: 150ms ease;
	--transition-med:  300ms ease;
}

/* ── 2. Reset ── */
*,
*::before,
*::after {
	box-sizing: border-box;
	margin:     0;
	padding:    0;
}

/* ── 3. Base ── */
html {
	font-size: 16px;
	-webkit-text-size-adjust: 100%;
}

body {
	font-family:      var(--font-mono);
	font-size:        var(--text-base);
	line-height:      1.6;
	color:            var(--text-primary);
	background-color: var(--bg-primary);
	min-height:       100vh;
	display:          flex;
	flex-direction:   row;
}

/* ── 4. Sidebar ── */
.sidebar {
	position:         relative;
	width:            var(--sidebar-collapsed);
	min-height:       100vh;
	background-color: var(--bg-sidebar);
	border-inline-end: 1px solid var(--border-color);
	overflow:         hidden;
	transition:       width var(--transition-med);
	flex-shrink:      0;
	display:          flex;
	flex-direction:   column;
	z-index:          10;
}

.sidebar[data-open] {
	width: var(--sidebar-width);
}

/* ── 5. Sidebar Toggle (chevron) ── */
.sidebar-toggle {
	display:          flex;
	align-items:      center;
	justify-content:  center;
	width:            2.25rem;
	height:           2.75rem;
	background:       transparent;
	border:           none;
	color:            var(--text-secondary);
	font-size:        var(--text-xl);
	cursor:           pointer;
	transition:       color var(--transition-fast),
	                  box-shadow var(--transition-med),
	                  transform var(--transition-med);
	flex-shrink:      0;
	align-self:       flex-end;
	line-height:      1;
}

.sidebar-toggle:hover {
	color:      var(--text-accent);
	box-shadow: var(--glow-shadow);
}

/* chevron points right by default; rotates when open */
.sidebar-toggle .chevron {
	display:    inline-block;
	transition: transform var(--transition-med);
}

.sidebar[data-open] .sidebar-toggle .chevron {
	transform: rotate(180deg);
}

/* ── 6. Sidebar Navigation ── */
.sidebar nav {
	display:        flex;
	flex-direction: column;
	padding:        var(--space-sm) 0;
	gap:            var(--space-xs);
	opacity:        1;
	transition:     opacity var(--transition-med);
}

/* hide nav text when collapsed */
.sidebar:not([data-open]) nav {
	opacity: 0;
}

.sidebar nav a {
	display:         flex;
	flex-direction:  column;
	padding:         var(--space-sm) var(--space-md);
	color:           var(--text-primary);
	text-decoration: none;
	font-size:       var(--text-sm);
	white-space:     nowrap;
	transition:      color var(--transition-fast),
	                 box-shadow var(--transition-med);
	border-radius:   0.25rem;
}

.sidebar nav a:hover {
	color:      var(--text-accent);
	box-shadow: var(--glow-shadow);
}

.sidebar nav a .coming-soon-label {
	margin-block-start: var(--space-xs);
}

/* ── 7. Main Content ── */
.main-content {
	flex:              1;
	display:           flex;
	flex-direction:    column;
	padding:           var(--space-xl);
	min-width:         0; /* prevent flex overflow */
	transition:        margin-inline-start var(--transition-med);
}

/* ── 8. Header ── */
.header {
	display:         flex;
	flex-direction:  column;
	gap:             var(--space-sm);
	margin-block-end: var(--space-xl);
}

/* ── 9. Greeting ── */
.greeting {
	color:     var(--text-title);
	opacity:   0.6;
	font-size: var(--text-lg);
	/* <em> is already italic */
}

/* ── 10. Site Title ── */
.site-title {
	font-style: italic;
	color:      var(--text-title);
	opacity:    0.6;
	font-size:  var(--text-lg);
	text-align: end;
	align-self: flex-end;
}

/* ── 11. Blurb ── */
.blurb {
	color:            var(--text-secondary);
	font-style:       italic;
	font-size:        var(--text-sm);
	max-width:        36rem;
	line-height:      1.7;
	margin-block-end: var(--space-2xl);
}

/* ── 12. Dashboard Grid ── */
.dashboard-grid {
	display:          grid;
	grid-template-columns: 1fr;
	gap:              var(--space-lg);
	max-width:        48rem;
}

/* ── 13. Dashboard Buttons ── */
.dashboard-btn {
	display:         flex;
	flex-direction:  column;
	align-items:     flex-start;
	padding:         var(--space-md) var(--space-lg);
	color:           var(--text-primary);
	text-decoration: none;
	font-family:     var(--font-mono);
	font-size:       var(--text-base);
	background:      transparent;
	border:          none;
	border-radius:   0.375rem;
	cursor:          pointer;
	transition:      color var(--transition-fast),
	                 box-shadow var(--transition-med);
}

.dashboard-btn:hover {
	color:      var(--text-accent);
	box-shadow: var(--glow-shadow);
}

/* ── 14. Coming-Soon Label (shared) ── */
.coming-soon-label {
	display:         block;
	font-style:      italic;
	color:           var(--text-secondary);
	font-size:       var(--text-xs);
	margin-block-start: var(--space-xs);
}

/* ── 15. Coming-Soon Page Layout ── */
.coming-soon-page {
	display:         flex;
	flex-direction:  column;
	align-items:     center;
	justify-content: center;
	flex:            1;
	text-align:      center;
	padding-block:   var(--space-2xl);
}

.coming-soon-page h1 {
	font-size:        var(--text-2xl);
	font-weight:      300;
	color:            var(--text-primary);
	letter-spacing:   0.05em;
	margin-block-end: var(--space-md);
}

.coming-soon-page .coming-soon-label {
	font-size: var(--text-base);
}

/* ── Settings ── */

.settings-option {
	margin-block-end: var(--space-lg);
}

.settings-toggle-label {
	display:        flex;
	align-items:    center;
	gap:            var(--space-md);
	cursor:         pointer;
	color:          var(--text-primary);
	font-size:      var(--text-base);
	user-select:    none;
}

.settings-toggle-label input {
	display: none;
}

.settings-toggle-slider {
	position:       relative;
	width:          2.5rem;
	height:         1.25rem;
	background:     var(--border-color);
	border-radius:  1rem;
	transition:     background 0.2s;
	flex-shrink:    0;
}

.settings-toggle-slider::after {
	content:        '';
	position:       absolute;
	top:            0.125rem;
	left:           0.125rem;
	width:          1rem;
	height:         1rem;
	background:     var(--text-secondary);
	border-radius:  50%;
	transition:     transform 0.2s, background 0.2s;
}

.settings-toggle-label input:checked + .settings-toggle-slider {
	background: var(--text-accent);
}

.settings-toggle-label input:checked + .settings-toggle-slider::after {
	transform:  translateX(1.25rem);
	background: var(--bg-primary);
}

.settings-volume-label {
	display:     block;
	color:       var(--text-primary);
	font-size:   var(--text-base);
	margin-block-end: var(--space-sm);
}

.settings-volume-row {
	display:     flex;
	align-items: center;
	gap:         var(--space-md);
}

.settings-volume-row input[type="range"] {
	-webkit-appearance: none;
	appearance:    none;
	width:         10rem;
	height:        4px;
	background:    var(--border-color);
	border-radius: 2px;
	outline:       none;
	cursor:        pointer;
}

.settings-volume-row input[type="range"]::-webkit-slider-thumb {
	-webkit-appearance: none;
	width:         14px;
	height:        14px;
	background:    var(--text-accent);
	border-radius: 50%;
	cursor:        pointer;
}

.settings-volume-row input[type="range"]::-moz-range-thumb {
	width:         14px;
	height:        14px;
	background:    var(--text-accent);
	border:        none;
	border-radius: 50%;
	cursor:        pointer;
}

.settings-volume-test {
	background:    transparent;
	border:        1px solid var(--border-color);
	color:         var(--text-secondary);
	font-size:     var(--text-sm);
	padding:       var(--space-xs) var(--space-sm);
	border-radius: 4px;
	cursor:        pointer;
	transition:    color 0.15s, border-color 0.15s;
}

.settings-volume-test:hover {
	color:        var(--text-primary);
	border-color: var(--text-secondary);
}

/* ── 16. Responsive — Mobile-First Breakpoints ── */

/* 40rem+ : header goes inline, grid expands to 2 columns */
@media (min-width: 40rem) {
	.header {
		flex-direction:  row;
		justify-content: space-between;
		align-items:     center;
		gap:             var(--space-md);
	}

	.site-title {
		align-self: auto;
		text-align: start;
	}

	.dashboard-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* 60rem+ : grid expands to 3 columns */
@media (min-width: 60rem) {
	.dashboard-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* mobile: sidebar becomes a fixed overlay */
@media (max-width: 39.9375rem) {
	.sidebar {
		position: fixed;
		inset-inline-start: 0;
		inset-block-start:  0;
		height:   100vh;
		z-index:  100;
	}

	.main-content {
		padding: var(--space-lg);
	}
}

/* ── 17. Login Page ── */
.login-body {
	flex-direction:  column;
	align-items:     center;
	justify-content: center;
	min-height:      100vh;
	padding:         var(--space-lg);
}

.login-card {
	width:            100%;
	max-width:        22rem;
	background-color: var(--bg-secondary);
	border:           1px solid var(--border-color);
	border-radius:    0.5rem;
	padding:          var(--space-xl) var(--space-lg);
}

.login-title {
	font-style:       italic;
	font-weight:      300;
	color:            var(--text-title);
	font-size:        var(--text-lg);
	text-align:       center;
	margin-block-end: var(--space-lg);
}

.login-form {
	display:        flex;
	flex-direction: column;
	gap:            var(--space-sm);
}

.login-form label {
	color:     var(--text-secondary);
	font-size: var(--text-sm);
}

.login-form input {
	background-color: var(--bg-primary);
	border:           1px solid var(--border-color);
	border-radius:    0.25rem;
	color:            var(--text-primary);
	font-family:      var(--font-mono);
	font-size:        var(--text-sm);
	padding:          var(--space-sm) var(--space-md);
	transition:       border-color var(--transition-fast),
	                  box-shadow var(--transition-med);
}

.login-form input:focus {
	outline:      none;
	border-color: var(--text-accent);
	box-shadow:   var(--glow-shadow);
}

.login-form button {
	margin-block-start: var(--space-md);
	background-color:   transparent;
	border:             1px solid var(--border-color);
	border-radius:      0.25rem;
	color:              var(--text-primary);
	font-family:        var(--font-mono);
	font-size:          var(--text-sm);
	padding:            var(--space-sm) var(--space-md);
	cursor:             pointer;
	transition:         color var(--transition-fast),
	                    border-color var(--transition-med),
	                    box-shadow var(--transition-med);
}

.login-form button:hover {
	color:        var(--text-accent);
	border-color: var(--text-accent);
	box-shadow:   var(--glow-shadow);
}

.login-error {
	color:            #f87171;
	font-size:        var(--text-xs);
	min-height:       1.2em;
	margin-block-end: var(--space-xs);
}

/* ── 18. Notes Page Layout ── */
.notes-layout {
	flex-direction: row;
	padding:        0;
	gap:            0;
}

/* ── 19. Notes List Panel (middle column) ── */
.notes-list-panel {
	width:            18rem;
	min-width:        18rem;
	flex-shrink:      0;
	border-inline-end: 1px solid var(--border-color);
	display:          flex;
	flex-direction:   column;
	min-height:       100vh;
	background-color: var(--bg-sidebar);
}

.notes-list-header {
	display:          flex;
	align-items:      center;
	justify-content:  space-between;
	padding:          var(--space-md);
	border-block-end: 1px solid var(--border-color);
	flex-shrink:      0;
}

.notes-list-title {
	color:      var(--text-title);
	font-size:  var(--text-sm);
	font-style: italic;
	opacity:    0.7;
}

.notes-add-btn {
	background:       transparent;
	border:           1px solid var(--border-color);
	border-radius:    0.25rem;
	color:            var(--text-primary);
	font-family:      var(--font-mono);
	font-size:        var(--text-lg);
	line-height:      1;
	width:            2rem;
	height:           2rem;
	display:          flex;
	align-items:      center;
	justify-content:  center;
	cursor:           pointer;
	transition:       color var(--transition-fast),
	                  border-color var(--transition-med),
	                  box-shadow var(--transition-med);
}

.notes-add-btn:hover {
	color:        var(--text-accent);
	border-color: var(--text-accent);
	box-shadow:   var(--glow-shadow);
}

/* ── 20. Notes List Items ── */
.notes-list {
	list-style:  none;
	overflow-y:  auto;
	flex:        1;
	padding:     var(--space-sm) 0;
}

.notes-list li {
	padding:       var(--space-sm) var(--space-md);
	cursor:        pointer;
	border-radius: 0.25rem;
	transition:    color var(--transition-fast),
	               background-color var(--transition-fast),
	               box-shadow var(--transition-med);
}

.notes-list li:hover {
	background-color: var(--bg-secondary);
	color:            var(--text-accent);
	box-shadow:       var(--glow-shadow);
}

.notes-list li[data-active] {
	background-color: var(--bg-secondary);
	color:            var(--text-accent);
	box-shadow:       var(--glow-shadow);
}

.notes-list-item-title {
	display:       block;
	font-size:     var(--text-sm);
	white-space:   nowrap;
	overflow:      hidden;
	text-overflow: ellipsis;
	color:         inherit;
}

.notes-list-item-date {
	display:            block;
	font-size:          var(--text-xs);
	color:              var(--text-secondary);
	margin-block-start: var(--space-xs);
}

/* ── 21. Notes Editor Panel (right column) ── */
.notes-editor-panel {
	flex:           1;
	min-width:      0;
	display:        flex;
	flex-direction: column;
	height:         100vh;
	overflow:       hidden;
}

.notes-editor-header {
	display:          flex;
	align-items:      center;
	justify-content:  space-between;
	padding:          var(--space-md) var(--space-lg);
	border-block-end: 1px solid var(--border-color);
	flex-shrink:      0;
	gap:              var(--space-md);
}

/* ── 22. Title Input ── */
.notes-title-input {
	flex:                    1;
	background:              transparent;
	border:                  none;
	border-block-end:        1px solid transparent;
	color:                   var(--text-title);
	font-family:             var(--font-mono);
	font-size:               var(--text-lg);
	padding:                 var(--space-xs) 0;
	outline:                 none;
	transition:              border-color var(--transition-fast),
	                         box-shadow var(--transition-med);
}

.notes-title-input:focus {
	border-block-end-color: var(--text-accent);
	box-shadow:             0 2px 8px rgba(125, 211, 252, 0.2);
}

.notes-title-input::placeholder {
	color:   var(--text-secondary);
	opacity: 0.5;
}

/* ── 23. Preview Toggle ── */
.notes-preview-toggle {
	background:    transparent;
	border:        1px solid var(--border-color);
	border-radius: 0.25rem;
	color:         var(--text-secondary);
	font-family:   var(--font-mono);
	font-size:     var(--text-xs);
	padding:       var(--space-xs) var(--space-sm);
	cursor:        pointer;
	flex-shrink:   0;
	transition:    color var(--transition-fast),
	               border-color var(--transition-med),
	               box-shadow var(--transition-med);
}

.notes-preview-toggle:hover {
	color:        var(--text-accent);
	border-color: var(--text-accent);
	box-shadow:   var(--glow-shadow);
}

.notes-preview-toggle[data-active] {
	border-color: var(--text-accent);
	color:        var(--text-accent);
}

/* ── 24. Editor Row (gutter + contenteditable) ── */
.notes-editor-row {
	display:    flex;
	flex:       1;
	overflow-y: auto;
}

.notes-editor-row[hidden] {
	display: none;
}

.notes-editor {
	flex:        1;
	padding:     var(--space-lg);
	padding-inline: 3rem;
	font-family: var(--font-mono);
	font-size:   var(--text-sm);
	line-height: 1.8;
	color:       var(--text-primary);
	outline:     none;
	white-space: pre-wrap;
	border:      none;
	resize:      none;
	overflow-y:  auto;
	background:  transparent;
}

/* ── 26. Preview Pane ── */
.notes-preview {
	flex:        1;
	padding:     var(--space-lg);
	overflow-y:  auto;
	font-family: var(--font-mono);
	font-size:   var(--text-sm);
	line-height: 1.8;
	color:       var(--text-primary);
}

.notes-preview h1 { font-size: var(--text-xl);   color: var(--text-accent); font-weight: 600; }
.notes-preview h2 { font-size: var(--text-lg);   color: var(--text-title);  font-weight: 500; }
.notes-preview h3 { font-size: var(--text-base); color: var(--text-title);  font-weight: 500; opacity: 0.8; }
.notes-preview .comment {
	color:      var(--text-secondary);
	opacity:    0.55;
	font-style: italic;
}
.notes-preview ul,
.notes-preview ol         { padding-inline-start: var(--space-lg); margin-block: var(--space-sm); }
.notes-preview ul ul,
.notes-preview ul ol,
.notes-preview ol ul,
.notes-preview ol ol     { margin-block: 0; }
.notes-preview .task-list-item {
	list-style: none;
}
.notes-preview .task-list-item input[type="checkbox"] {
	appearance:       none;
	-webkit-appearance: none;
	width:            1em;
	height:           1em;
	border:           1px solid var(--text-secondary);
	border-radius:    0.2em;
	background-color: var(--bg-secondary);
	vertical-align:   middle;
	margin-inline-end: 0.4em;
	position:         relative;
	flex-shrink:      0;
}
.notes-preview .task-list-item input[type="checkbox"]:checked::after {
	content:          '✓';
	color:            var(--text-accent);
	font-size:        0.85em;
	font-weight:      700;
	position:         absolute;
	inset:            0;
	display:          flex;
	align-items:      center;
	justify-content:  center;
}
.notes-preview blockquote {
	border-inline-start:  3px solid var(--text-accent);
	padding-inline-start: var(--space-md);
	color:                var(--text-secondary);
	opacity:              0.75;
	margin-block:         var(--space-sm);
}
.notes-preview blockquote p {
	margin-block: var(--space-xs);
}
.notes-preview .md-code {
	background-color: var(--bg-secondary);
	border:           1px solid var(--border-color);
	border-radius:    0.2rem;
	padding:          0.1em 0.35em;
	font-size:        0.9em;
	color:            var(--text-accent);
}
.notes-preview pre {
	background-color: var(--bg-secondary);
	border:           1px solid var(--border-color);
	border-radius:    0.35rem;
	padding:          0.75em 1em;
	overflow-x:       auto;
	margin-block:     var(--space-sm);
}
.notes-preview pre code {
	font-size:   0.9em;
	color:       var(--text-accent);
	white-space: pre;
	display:     block;
}
.notes-preview hr {
	border: none;
	border-block-start: 1px solid var(--border-color);
	margin-block: var(--space-md);
}
.notes-preview br                  { line-height: 1; }
.notes-preview .md-bold            { font-weight: 700; }
.notes-preview .md-italic          { font-style:  italic; }
.notes-preview .md-strikethrough   { text-decoration: line-through; }

/* ── 26b. Preview — Tables ── */
.notes-preview table {
	border-collapse: collapse;
	width:           100%;
	margin-block:    var(--space-sm);
	font-size:       var(--text-sm);
}
.notes-preview th,
.notes-preview td {
	border:          1px solid var(--border-color);
	padding:         var(--space-xs) var(--space-sm);
	text-align:      left;
}
.notes-preview thead th {
	background-color: var(--bg-secondary);
	color:            var(--text-accent);
	font-weight:      600;
}
.notes-preview tbody tr:nth-child(even) {
	background-color: var(--bg-secondary);
}

/* ── 27. Action Bar ── */
.notes-actions {
	display:            flex;
	gap:                var(--space-sm);
	padding:            var(--space-md) var(--space-lg);
	border-block-start: 1px solid var(--border-color);
	flex-shrink:        0;
}

.notes-actions-right {
	margin-inline-start: auto;
}

.notes-btn {
	background-color: transparent;
	border:           1px solid var(--border-color);
	border-radius:    0.25rem;
	color:            var(--text-primary);
	font-family:      var(--font-mono);
	font-size:        var(--text-sm);
	padding:          var(--space-sm) var(--space-md);
	cursor:           pointer;
	transition:       color var(--transition-fast),
	                  border-color var(--transition-med),
	                  box-shadow var(--transition-med);
}

.notes-btn:hover {
	color:        var(--text-accent);
	border-color: var(--text-accent);
	box-shadow:   var(--glow-shadow);
}

.notes-btn-save {
	border-color: var(--text-accent);
	color:        var(--text-accent);
}

.notes-btn-save:disabled {
	color:        var(--text-secondary);
	border-color: var(--border-color);
	cursor:       default;
	box-shadow:   none;
}

.notes-btn-save:disabled:hover {
	color:        var(--text-secondary);
	border-color: var(--border-color);
	box-shadow:   none;
}

.notes-btn-delete {
	color:        #f87171;
	border-color: #f87171;
}

.notes-btn-delete:hover {
	color:        #f87171;
	border-color: #f87171;
	box-shadow:   0 0 8px rgba(248, 113, 113, 0.3), 0 0 24px rgba(248, 113, 113, 0.12);
}

/* ── 28. Modal ── */
.modal-overlay {
	position:         fixed;
	inset:            0;
	background-color: rgba(10, 14, 26, 0.75);
	z-index:          200;
	display:          none;
	align-items:      center;
	justify-content:  center;
}
.modal-overlay:not([hidden]) {
	display:          flex;
}

.modal-card {
	background-color: var(--bg-secondary);
	border:           1px solid var(--border-color);
	border-radius:    0.5rem;
	padding:          var(--space-xl) var(--space-lg);
	max-width:        24rem;
	width:            90%;
	box-shadow:       var(--glow-shadow);
}

.modal-message {
	color:            var(--text-primary);
	font-size:        var(--text-sm);
	margin-block-end: var(--space-lg);
	text-align:       center;
}

.modal-actions {
	display:        flex;
	justify-content: center;
	gap:            var(--space-sm);
	flex-wrap:      wrap;
}

.notes-btn-modal-discard {
	color:        #f87171;
	border-color: #f87171;
}

.notes-btn-modal-discard:hover {
	color:        #f87171;
	border-color: #f87171;
	box-shadow:   0 0 8px rgba(248, 113, 113, 0.3), 0 0 24px rgba(248, 113, 113, 0.12);
}

/* ── 28a. Share Modal ── */
.share-modal-card {
	max-width: 32rem;
	padding:   var(--space-lg);
}

.share-modal-header {
	display:            flex;
	justify-content:    space-between;
	align-items:        center;
	margin-block-end:   var(--space-md);
	padding-block-end:  var(--space-sm);
	border-block-end:   1px solid var(--border-color);
}

.share-modal-title {
	color:       var(--text-primary);
	font-size:   var(--text-md);
	font-weight: 500;
}

.share-modal-content {
	display:          flex;
	flex-direction:   column;
	gap:              var(--space-md);
	margin-block-end: var(--space-lg);
}

.share-note-info {
	display:        flex;
	gap:            var(--space-sm);
	align-items:    baseline;
	padding:        var(--space-sm) var(--space-md);
	background:     var(--bg-primary);
	border:         1px solid var(--border-color);
	border-radius:  0.25rem;
}

.share-note-label {
	color:       var(--text-secondary);
	font-size:   var(--text-xs);
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.share-note-title {
	color:     var(--text-primary);
	font-size: var(--text-sm);
}

.share-message-input {
	width:         100%;
	background:    transparent;
	border:        1px solid var(--border-color);
	border-radius: 0.25rem;
	color:         var(--text-primary);
	font-family:   var(--font-mono);
	font-size:     var(--text-sm);
	padding:       var(--space-sm) var(--space-md);
	resize:        vertical;
	min-height:    4rem;
	outline:       none;
	transition:    border-color var(--transition-fast), box-shadow var(--transition-med);
}

.share-message-input:focus {
	border-color: var(--text-accent);
	box-shadow:   var(--glow-shadow);
}

.share-modal-actions {
	display:         flex;
	justify-content: flex-end;
}

.notes-btn-send {
	border-color: var(--text-accent);
	color:        var(--text-accent);
}

.notes-btn-send:hover {
	box-shadow: var(--glow-shadow);
}

.notes-btn-share:disabled {
	color:        var(--text-secondary);
	border-color: var(--border-color);
	cursor:       default;
	box-shadow:   none;
}

.notes-btn-share:disabled:hover {
	color:        var(--text-secondary);
	border-color: var(--border-color);
	box-shadow:   none;
}

.note-modal-close {
	background:    transparent;
	border:        none;
	color:         var(--text-secondary);
	font-size:     1.5rem;
	line-height:   1;
	cursor:        pointer;
	padding:       0;
	width:         1.5rem;
	height:        1.5rem;
	display:       flex;
	align-items:   center;
	justify-content: center;
	transition:    color var(--transition-fast);
}

.note-modal-close:hover {
	color: var(--text-primary);
}

/* ── 29. Notes Responsive ── */
@media (max-width: 39.9375rem) {
	.notes-layout {
		flex-direction: column;
	}

	.notes-list-panel {
		width:     100%;
		min-width: unset;
		min-height: auto;
		max-height: 40vh;
	}

	.notes-editor-panel {
		min-height: auto;
	}
}

/* ─────────────────────────────────────────────
   30. Board Layout
   ───────────────────────────────────────────── */

.board-layout {
	display:        flex;
	flex-direction: column;
	padding:        0;
	height:         100vh;
}

.board-header {
	display:          flex;
	align-items:      center;
	padding:          var(--space-md) var(--space-lg);
	border-block-end: 1px solid var(--border-color);
	flex-shrink:      0;
}

.board-title {
	color:      var(--text-title);
	font-size:  var(--text-sm);
	font-style: italic;
	opacity:    0.7;
}

/* ── 31. Board Messages ── */

.board-messages {
	flex:            1;
	overflow-y:      auto;
	padding:         var(--space-lg);
	display:         flex;
	flex-direction:  column;
	gap:             var(--space-md);
}

.board-empty {
	color:      var(--text-secondary);
	font-size:  var(--text-sm);
	font-style: italic;
	text-align: center;
	margin-block-start: var(--space-2xl);
}

.board-load-more-btn {
	display:       block;
	margin:        0 auto var(--space-md);
	background:    transparent;
	border:        1px solid var(--border-color);
	border-radius: 0.25rem;
	color:         var(--text-secondary);
	font-family:   var(--font-mono);
	font-size:     var(--text-xs);
	padding:       var(--space-xs) var(--space-md);
	cursor:        pointer;
	transition:    color var(--transition-fast),
	               border-color var(--transition-fast);
}

.board-load-more-btn:hover {
	color:        var(--text-accent);
	border-color: var(--text-accent);
}

.board-message {
	min-width:        20rem;
	max-width:        36rem;
	padding:          var(--space-sm) var(--space-md);
	border-radius:    0.375rem;
	background-color: var(--bg-secondary);
	border:           1px solid var(--border-color);
}

.board-message-own {
	background-color: rgba(125, 211, 252, 0.08);
	border-color:     rgba(125, 211, 252, 0.25);
	margin-inline-start: auto;
}

.board-message-header {
	display:          flex;
	justify-content:  space-between;
	align-items:      center;
	margin-block-end: var(--space-xs);
}

.board-message-sender {
	color:       var(--text-accent);
	font-size:   var(--text-sm);
	font-weight: 500;
}

.board-message-time {
	color:     var(--text-secondary);
	font-size: var(--text-xs);
}

.board-message-body {
	color:         var(--text-primary);
	font-size:     var(--text-sm);
	line-height:   1.6;
	white-space:   pre-wrap;
	overflow-wrap: break-word;
	word-break:    break-word;
}

/* ── 31b. Board Reply Quote (inline quoted parent) ── */

.board-reply-quote {
	border-inline-start: 2px solid var(--text-accent);
	padding-inline-start: var(--space-sm);
	color:                var(--text-secondary);
	font-size:            var(--text-xs);
	margin-block-end:     var(--space-xs);
	white-space:          nowrap;
	overflow:             hidden;
	text-overflow:        ellipsis;
}

/* ── 31c. Board Reply Preview (compose area) ── */

.board-reply-preview {
	display:              flex;
	align-items:          center;
	justify-content:      space-between;
	gap:                  var(--space-sm);
	padding:              var(--space-xs) var(--space-sm);
	margin-block-end:     var(--space-sm);
	background:           rgba(125, 211, 252, 0.06);
	border-inline-start:  2px solid var(--text-accent);
	border-radius:        0 0.25rem 0.25rem 0;
	font-size:            var(--text-xs);
	color:                var(--text-secondary);
}

.board-reply-preview-text {
	flex:           1;
	overflow:       hidden;
	text-overflow:  ellipsis;
	white-space:    nowrap;
}

.board-reply-preview-close {
	background:  transparent;
	border:      none;
	color:       var(--text-secondary);
	font-size:   var(--text-sm);
	cursor:      pointer;
	padding:     0 var(--space-xs);
	flex-shrink: 0;
	line-height: 1;
}

.board-reply-preview-close:hover {
	color: var(--text-primary);
}

/* ── 32. Board Note Card ── */

.board-note-card {
	margin-block-start: var(--space-sm);
	padding:            var(--space-sm) var(--space-md);
	border:             1px solid var(--border-color);
	border-radius:      0.25rem;
	cursor:             pointer;
	color:              var(--text-accent);
	font-size:          var(--text-sm);
	font-family:        var(--font-mono);
	transition:         box-shadow var(--transition-med);
	display:            flex;
	justify-content:    space-between;
	align-items:        center;
	gap:                var(--space-sm);
}

.board-note-card:hover {
	box-shadow: var(--glow-shadow);
}

.board-note-card-title {
	flex:               1;
}

.board-note-card-label {
	color:              var(--text-muted);
	opacity:            0.5;
	font-size:          var(--text-xs);
	flex-shrink:        0;
}

/* ── 33. Board Compose ── */

.board-compose {
	border-block-start: 1px solid var(--border-color);
	padding:            var(--space-md) var(--space-lg);
	flex-shrink:        0;
}

.board-compose-row {
	display:     flex;
	gap:         var(--space-sm);
	align-items: flex-end;
}

.board-input {
	flex:          1;
	background:    transparent;
	border:        1px solid var(--border-color);
	border-radius: 0.25rem;
	color:         var(--text-primary);
	font-family:   var(--font-mono);
	font-size:     var(--text-sm);
	padding:       var(--space-sm) var(--space-md);
	resize:        none;
	outline:       none;
	transition:    border-color var(--transition-fast), box-shadow var(--transition-med);
}

.board-input:focus {
	border-color: var(--text-accent);
	box-shadow:   var(--glow-shadow);
}

.board-send-btn {
	border:        1px solid var(--text-accent);
	color:         var(--text-accent);
	background:    transparent;
	border-radius: 0.25rem;
	font-family:   var(--font-mono);
	font-size:     var(--text-sm);
	padding:       var(--space-sm) var(--space-md);
	cursor:        pointer;
	transition:    box-shadow var(--transition-med);
}

.board-send-btn:hover {
	box-shadow: var(--glow-shadow);
}

.board-attach-row {
	display:           flex;
	align-items:       center;
	gap:               var(--space-sm);
	margin-block-start: var(--space-xs);
}

.board-attach-btn {
	background:  transparent;
	border:      1px solid var(--border-color);
	color:       var(--text-secondary);
	font-family: var(--font-mono);
	font-size:   var(--text-xs);
	padding:     var(--space-xs) var(--space-sm);
	cursor:      pointer;
	border-radius: 0.25rem;
	transition:  color var(--transition-fast), border-color var(--transition-fast);
}

.board-attach-btn:hover {
	color:        var(--text-accent);
	border-color: var(--text-accent);
}

.board-attach-info {
	color:     var(--text-accent);
	font-size: var(--text-xs);
}

.board-attach-info[hidden] { display: none; }

.board-attach-remove {
	background:  transparent;
	border:      none;
	color:       var(--text-secondary);
	font-size:   var(--text-sm);
	cursor:      pointer;
	padding:     0 var(--space-xs);
}

.board-attach-remove:hover {
	color: #f87171;
}

.board-attach-remove[hidden] { display: none; }

/* ── 34. Note Preview Modal ── */

.note-modal-card {
	max-width:      48rem;
	width:          90%;
	max-height:     80vh;
	display:        flex;
	flex-direction: column;
}

.note-modal-header {
	display:            flex;
	justify-content:    space-between;
	align-items:        center;
	padding-block-end:  var(--space-md);
	border-block-end:   1px solid var(--border-color);
	flex-shrink:        0;
}

.note-modal-title {
	color:     var(--text-title);
	font-size: var(--text-lg);
}

.note-modal-close {
	background: transparent;
	border:     none;
	color:      var(--text-secondary);
	font-size:  var(--text-lg);
	cursor:     pointer;
}

.note-modal-close:hover {
	color: var(--text-primary);
}

.note-modal-content {
	flex:              1;
	overflow-y:        auto;
	padding-block:     var(--space-md);
}

.note-modal-actions {
	display:             flex;
	justify-content:     space-between;
	align-items:         center;
	padding-block-start: var(--space-md);
	border-block-start:  1px solid var(--border-color);
	flex-shrink:         0;
}

.note-modal-spacer { flex: 1; }

/* ── 35. Note Picker Modal ── */

.note-picker-card {
	max-width:      32rem;
	width:          90%;
	max-height:     60vh;
	display:        flex;
	flex-direction: column;
}

.note-picker-header {
	display:            flex;
	justify-content:    space-between;
	align-items:        center;
	padding-block-end:  var(--space-md);
	border-block-end:   1px solid var(--border-color);
	flex-shrink:        0;
	color:              var(--text-title);
	font-size:          var(--text-sm);
}

.note-picker-list {
	flex:       1;
	overflow-y: auto;
	list-style: none;
}

.note-picker-item {
	padding:          var(--space-sm) var(--space-md);
	color:            var(--text-primary);
	font-size:        var(--text-sm);
	cursor:           pointer;
	border-block-end: 1px solid var(--border-color);
	transition:       color var(--transition-fast);
}

.note-picker-item:hover {
	color: var(--text-accent);
}

.note-picker-empty {
	padding:    var(--space-lg);
	color:      var(--text-secondary);
	font-size:  var(--text-sm);
	font-style: italic;
	text-align: center;
}

/* ── 36. Unread Indicators ── */

.board-indicator {
	position:         absolute;
	inset-block-start: 50%;
	inset-inline-end:  var(--space-sm);
	transform:        translateY(-50%);
	width:            0.5rem;
	height:           0.5rem;
	border-radius:    50%;
	background-color: #3b82f6;
	box-shadow:       0 0 6px rgba(59, 130, 246, 0.6);
}

.board-indicator[hidden] { display: none; }

.dashboard-btn .board-indicator {
	inset-inline-end: var(--space-md);
}

.sidebar-toggle {
	position: relative;
}

.sidebar-toggle-indicator {
	position:          absolute;
	inset-block-start: 0.35rem;
	inset-inline-end:  0.35rem;
	width:             0.5rem;
	height:            0.5rem;
	border-radius:     50%;
	background-color:  #3b82f6;
	box-shadow:        0 0 6px rgba(59, 130, 246, 0.6);
}

.sidebar-toggle-indicator[hidden] { display: none; }

/* ── 37. Board Responsive ── */

@media (max-width: 39.9375rem) {
	.board-compose-row {
		flex-direction: column;
		align-items:    stretch;
	}

	.board-message {
		max-width: 100%;
	}
}

/* ── 38. Shared Items Sidebar ── */

.shared-sidebar {
	position:            fixed;
	inset-inline-end:    0;
	inset-block-start:   0;
	width:               2.25rem;
	height:              100vh;
	background-color:    var(--bg-sidebar);
	border-inline-start: 1px solid var(--border-color);
	overflow:            hidden;
	transition:          width var(--transition-med);
	display:             flex;
	flex-direction:      column;
	z-index:             10;
}

.shared-sidebar[data-open] {
	width: 18rem;
}

.shared-sidebar-toggle {
	display:         flex;
	align-items:     center;
	justify-content: center;
	width:           2.25rem;
	height:          2.75rem;
	background:      transparent;
	border:          none;
	color:           var(--text-secondary);
	font-size:       var(--text-xl);
	cursor:          pointer;
	transition:      color var(--transition-fast);
	flex-shrink:     0;
	line-height:     1;
}

.shared-sidebar-toggle:hover {
	color: var(--text-accent);
}

.shared-sidebar-toggle .chevron {
	display:    inline-block;
	transition: transform var(--transition-med);
}

.shared-sidebar[data-open] .shared-sidebar-toggle .chevron {
	transform: rotate(180deg);
}

.shared-sidebar-content {
	display:        flex;
	flex-direction: column;
	flex:           1;
	opacity:        0;
	transition:     opacity var(--transition-med);
	overflow:       hidden;
}

.shared-sidebar[data-open] .shared-sidebar-content {
	opacity: 1;
}

.shared-sidebar-header {
	padding:          var(--space-md);
	border-block-end: 1px solid var(--border-color);
	flex-shrink:      0;
}

.shared-sidebar-title {
	color:      var(--text-title);
	font-size:  var(--text-sm);
	font-style: italic;
	opacity:    0.7;
}

.shared-sidebar-search {
	padding:          var(--space-sm) var(--space-md);
	border-block-end: 1px solid var(--border-color);
	flex-shrink:      0;
}

.shared-search-input {
	width:         100%;
	background:    transparent;
	border:        1px solid var(--border-color);
	border-radius: 0.25rem;
	color:         var(--text-primary);
	font-family:   var(--font-mono);
	font-size:     var(--text-xs);
	padding:       var(--space-xs) var(--space-sm);
	outline:       none;
	transition:    border-color var(--transition-fast);
}

.shared-search-input:focus {
	border-color: var(--text-accent);
}

.shared-items-list {
	list-style: none;
	overflow-y: auto;
	flex:       1;
	padding:    var(--space-sm) 0;
}

.shared-item {
	display:        flex;
	flex-direction: column;
	padding:        var(--space-sm) var(--space-md);
	cursor:         pointer;
	transition:     color var(--transition-fast),
	                background-color var(--transition-fast);
}

.shared-item:hover {
	background-color: var(--bg-secondary);
	color:            var(--text-accent);
}

.shared-item-title {
	font-size:     var(--text-sm);
	white-space:   nowrap;
	overflow:      hidden;
	text-overflow: ellipsis;
	color:         inherit;
}

.shared-item-sender {
	font-size:          var(--text-xs);
	color:              var(--text-secondary);
	margin-block-start: var(--space-xs);
}

.shared-items-empty {
	padding:    var(--space-lg);
	color:      var(--text-secondary);
	font-size:  var(--text-sm);
	font-style: italic;
	text-align: center;
}

.shared-load-more-btn {
	display:       block;
	padding:       var(--space-sm) var(--space-md);
	color:         var(--text-secondary);
	font-size:     var(--text-xs);
	text-align:    center;
	cursor:        pointer;
	transition:    color var(--transition-fast);
}

.shared-load-more-btn:hover {
	color: var(--text-accent);
}

/* adjust board layout for shared sidebar */
.board-layout {
	margin-inline-end: 2.25rem;
	transition: margin-inline-end var(--transition-med);
}

body:has(.shared-sidebar[data-open]) .board-layout {
	margin-inline-end: 18rem;
}

/* ── 39. Notes Search ── */

.notes-search {
	padding:          var(--space-sm) var(--space-md);
	border-block-end: 1px solid var(--border-color);
	flex-shrink:      0;
}

.notes-search-input {
	width:         100%;
	background:    transparent;
	border:        1px solid var(--border-color);
	border-radius: 0.25rem;
	color:         var(--text-primary);
	font-family:   var(--font-mono);
	font-size:     var(--text-xs);
	padding:       var(--space-xs) var(--space-sm);
	outline:       none;
	transition:    border-color var(--transition-fast);
}

.notes-search-input:focus {
	border-color: var(--text-accent);
}

.notes-load-more-btn {
	display:    block;
	padding:    var(--space-sm) var(--space-md);
	color:      var(--text-secondary);
	font-size:  var(--text-xs);
	text-align: center;
	cursor:     pointer;
	transition: color var(--transition-fast);
}

.notes-load-more-btn:hover {
	color: var(--text-accent);
}

/* ─────────────────────────────────────────────
   40. Links Page Layout
   ───────────────────────────────────────────── */

.links-layout {
	display:        flex;
	flex-direction: column;
	padding:        var(--space-xl);
	gap:            var(--space-lg);
}

.links-header {
	display:     flex;
	align-items: center;
	gap:         var(--space-md);
	flex-shrink: 0;
}

.search-filter-group {
	display:       flex;
	align-items:   center;
	gap:           var(--space-md);
	flex:          1;
	max-width:     32rem;
	margin:        0 auto;
}

.search-input-wrapper {
	position:      relative;
	flex:          1;
}

.links-search-input {
	width:         100%;
	background:    transparent;
	border:        1px solid var(--border-color);
	border-radius: 0.25rem;
	color:         var(--text-primary);
	font-family:   var(--font-mono);
	font-size:     var(--text-sm);
	padding:       var(--space-sm) var(--space-md);
	padding-right: 2rem;
	outline:       none;
	transition:    border-color var(--transition-fast), box-shadow var(--transition-med);
	box-sizing:    border-box;
}

.links-search-input:focus {
	border-color: var(--text-accent);
	box-shadow:   var(--glow-shadow);
}

.search-clear-btn {
	position:    absolute;
	right:       0.4rem;
	top:         50%;
	transform:   translateY(-50%);
	background:  none;
	border:      none;
	color:       var(--text-secondary);
	font-size:   1.1rem;
	cursor:      pointer;
	padding:     0 0.25rem;
	line-height: 1;
	display:     none;
}

.search-clear-btn:hover {
	color: var(--text-primary);
}

.links-add-btn {
	background:      transparent;
	border:          1px solid var(--border-color);
	border-radius:   0.25rem;
	color:           var(--text-primary);
	font-family:     var(--font-mono);
	font-size:       var(--text-lg);
	line-height:     1;
	width:           2rem;
	height:          2rem;
	display:         flex;
	align-items:     center;
	justify-content: center;
	cursor:          pointer;
	flex-shrink:     0;
	transition:      color var(--transition-fast),
	                 border-color var(--transition-med),
	                 box-shadow var(--transition-med);
}

.links-add-btn:hover {
	color:        var(--text-accent);
	border-color: var(--text-accent);
	box-shadow:   var(--glow-shadow);
}

/* ── 40b. Tag Filter ── */

.tag-filter-btn {
	background:    transparent;
	border:        1px solid var(--border-color);
	border-radius: 0.25rem;
	color:         var(--text-secondary);
	font-family:   var(--font-mono);
	font-size:     var(--text-xs);
	padding:       var(--space-xs) var(--space-sm);
	cursor:        pointer;
	flex-shrink:   0;
	transition:    color var(--transition-fast),
	               border-color var(--transition-fast);
}

.tag-filter-btn:hover {
	color:        var(--text-accent);
	border-color: var(--text-accent);
}

.tag-filter-btn-active {
	color:        var(--text-accent);
	border-color: var(--text-accent);
}

.tag-filter-inline {
	display:     flex;
	align-items: center;
	gap:         var(--space-sm);
	flex:        1;
	min-width:   0;
	flex-wrap:   wrap;
}

.tag-filter-inline[hidden] {
	display: none;
}

.tag-filter-inline .tag-pills {
	display:   flex;
	flex-wrap: wrap;
	gap:       var(--space-xs);
	margin:    0;
}

.tag-filter-inline .tag-pills:empty {
	display: none;
}

.tag-filter-inline .tag-pills {
	cursor: pointer;
}

.tag-filter-inline .tag-input-container {
	flex: 1;
	min-width: 8rem;
}

.tag-filter-close-btn {
	background:  none;
	border:      none;
	color:       var(--text-secondary);
	font-size:   1.1rem;
	cursor:      pointer;
	padding:     0 0.25rem;
	line-height: 1;
	flex-shrink: 0;
}

.tag-filter-close-btn:hover {
	color: var(--text-primary);
}

/* ── 41. Links List & Cards ── */

.links-list {
	display:        flex;
	flex-direction: column;
	gap:            var(--space-sm);
}

.links-empty {
	color:      var(--text-secondary);
	font-size:  var(--text-sm);
	font-style: italic;
	text-align: center;
	padding:    var(--space-2xl);
}

.link-card {
	position:         relative;
	padding:          var(--space-md) var(--space-lg);
	background-color: var(--bg-secondary);
	border:           1px solid var(--border-color);
	border-radius:    0.375rem;
	cursor:           pointer;
	transition:       box-shadow var(--transition-med),
	                  border-color var(--transition-med);
}

.link-card:hover {
	border-color: rgba(125, 211, 252, 0.25);
	box-shadow:   var(--glow-shadow);
}

.link-card-title {
	color:       var(--text-primary);
	font-size:   var(--text-sm);
	font-weight: 500;
}

.link-card-url {
	color:              var(--text-secondary);
	font-size:          var(--text-xs);
	margin-block-start: var(--space-xs);
	overflow:           hidden;
	text-overflow:      ellipsis;
	white-space:        nowrap;
}

.link-card-desc {
	color:              var(--text-secondary);
	font-size:          var(--text-xs);
	margin-block-start: var(--space-xs);
	line-height:        1.5;
}

.link-card-meta {
	display:            flex;
	justify-content:    flex-end;
	align-items:        center;
	margin-block-start: var(--space-sm);
}

.link-card-owner {
	color:     var(--text-accent);
	font-size: var(--text-xs);
}

.link-card-date {
	color:     var(--text-secondary);
	font-size: var(--text-xs);
}

.link-card-tags {
	display:            flex;
	flex-wrap:          wrap;
	gap:                var(--space-xs);
	margin-block-start: var(--space-sm);
}

.links-load-more-btn {
	display:       block;
	margin:        var(--space-md) auto 0;
	background:    transparent;
	border:        1px solid var(--border-color);
	border-radius: 0.25rem;
	color:         var(--text-secondary);
	font-family:   var(--font-mono);
	font-size:     var(--text-xs);
	padding:       var(--space-xs) var(--space-md);
	cursor:        pointer;
	transition:    color var(--transition-fast), border-color var(--transition-fast);
}

.links-load-more-btn:hover {
	color:        var(--text-accent);
	border-color: var(--text-accent);
}

/* ── 42. Tag Pills ── */

.tag-pill {
	display:       inline-block;
	padding:       0.1em 0.5em;
	background:    rgba(125, 211, 252, 0.12);
	border:        1px solid rgba(125, 211, 252, 0.25);
	border-radius: 0.75rem;
	color:         var(--text-accent);
	font-size:     var(--text-xs);
	white-space:   nowrap;
}

.tag-pill-removable {
	cursor:  default;
}

.tag-pill-x {
	cursor:             pointer;
	margin-inline-start: 0.25em;
	opacity:            0.6;
}

.tag-pill-x:hover {
	opacity: 1;
}

/* ── 43. Tag Input & Autocomplete ── */

.tag-input-container {
	position: relative;
}

.tag-pills {
	display:   flex;
	flex-wrap: wrap;
	gap:       var(--space-xs);
	margin-block-end: var(--space-xs);
}

.tag-input {
	width:         100%;
	background:    transparent;
	border:        1px solid var(--border-color);
	border-radius: 0.25rem;
	color:         var(--text-primary);
	font-family:   var(--font-mono);
	font-size:     var(--text-sm);
	padding:       var(--space-xs) var(--space-sm);
	outline:       none;
	transition:    border-color var(--transition-fast);
}

.tag-input:focus {
	border-color: var(--text-accent);
}

.tag-suggestions {
	position:         absolute;
	inset-block-start: 100%;
	inset-inline-start: 0;
	inset-inline-end:   0;
	background:       var(--bg-secondary);
	border:           1px solid var(--border-color);
	border-radius:    0.25rem;
	list-style:       none;
	max-height:       12rem;
	overflow-y:       auto;
	z-index:          300;
	margin-block-start: var(--space-xs);
}

.tag-suggestion-item {
	padding:    var(--space-xs) var(--space-sm);
	color:      var(--text-primary);
	font-size:  var(--text-sm);
	cursor:     pointer;
	transition: color var(--transition-fast), background-color var(--transition-fast);
}

.tag-suggestion-item:hover {
	color:            var(--text-accent);
	background-color: var(--bg-primary);
}

/* ── 44. Link Modals ── */

.link-modal-card {
	max-width: 28rem;
	width:     90%;
}

.link-modal-card-wide {
	max-width:  40rem;
	max-height: 80vh;
	overflow-y: auto;
}

.link-modal-header {
	display:            flex;
	justify-content:    space-between;
	align-items:        center;
	margin-block-end:   var(--space-md);
	padding-block-end:  var(--space-sm);
	border-block-end:   1px solid var(--border-color);
}

.link-modal-title {
	color:      var(--text-title);
	font-size:  var(--text-sm);
	font-weight: 500;
}

.link-modal-body {
	display:        flex;
	flex-direction: column;
	gap:            var(--space-sm);
	margin-block-end: var(--space-md);
}

.link-modal-footer {
	display:         flex;
	justify-content: flex-end;
	gap:             var(--space-sm);
}

.link-field-label {
	color:     var(--text-secondary);
	font-size: var(--text-xs);
}

.link-field-hint {
	opacity: 0.6;
}

.link-field-input {
	width:         100%;
	background:    transparent;
	border:        1px solid var(--border-color);
	border-radius: 0.25rem;
	color:         var(--text-primary);
	font-family:   var(--font-mono);
	font-size:     var(--text-sm);
	padding:       var(--space-sm) var(--space-md);
	outline:       none;
	transition:    border-color var(--transition-fast), box-shadow var(--transition-med);
}

.link-field-input:focus {
	border-color: var(--text-accent);
	box-shadow:   var(--glow-shadow);
}

.link-field-input[readonly] {
	opacity: 0.6;
}

.link-field-textarea {
	width:         100%;
	background:    transparent;
	border:        1px solid var(--border-color);
	border-radius: 0.25rem;
	color:         var(--text-primary);
	font-family:   var(--font-mono);
	font-size:     var(--text-sm);
	padding:       var(--space-sm) var(--space-md);
	resize:        vertical;
	outline:       none;
	transition:    border-color var(--transition-fast), box-shadow var(--transition-med);
}

.link-field-textarea:focus {
	border-color: var(--text-accent);
	box-shadow:   var(--glow-shadow);
}

.link-url-input {
	width:         100%;
	background:    transparent;
	border:        1px solid var(--border-color);
	border-radius: 0.25rem;
	color:         var(--text-primary);
	font-family:   var(--font-mono);
	font-size:     var(--text-sm);
	padding:       var(--space-sm) var(--space-md);
	outline:       none;
	transition:    border-color var(--transition-fast), box-shadow var(--transition-med);
}

.link-url-input:focus {
	border-color: var(--text-accent);
	box-shadow:   var(--glow-shadow);
}

/* ── 45. Link Detail Modal ── */

.link-detail-footer {
	display:         flex;
	justify-content: space-between;
	align-items:     center;
	gap:             var(--space-sm);
}

.link-detail-footer-left {
	display: flex;
	gap:     var(--space-sm);
}

.link-detail-footer-right {
	display:             flex;
	gap:                 var(--space-sm);
	margin-inline-start: auto;
}

.link-detail-url {
	color:         var(--text-accent);
	font-size:     var(--text-xs);
	overflow-wrap: break-word;
	word-break:    break-all;
}

.link-detail-description {
	color:              var(--text-primary);
	font-size:          var(--text-sm);
	line-height:        1.6;
	margin-block-start: var(--space-sm);
}

.link-detail-meta {
	display:            flex;
	justify-content:    space-between;
	margin-block-start: var(--space-md);
	color:              var(--text-secondary);
	font-size:          var(--text-xs);
}

.link-detail-tags {
	display:            flex;
	flex-wrap:          wrap;
	gap:                var(--space-xs);
	margin-block-start: var(--space-sm);
}

.link-detail-comments {
	margin-block-start:  var(--space-lg);
	padding-block-start: var(--space-md);
	border-block-start:  1px solid var(--border-color);
}

.link-detail-comments-title {
	color:              var(--text-secondary);
	font-size:          var(--text-xs);
	text-transform:     uppercase;
	letter-spacing:     0.05em;
	margin-block-end:   var(--space-sm);
}

.comment-item {
	padding:          var(--space-sm) 0;
	border-block-end: 1px solid var(--border-color);
}

.comment-item:last-child {
	border-block-end: none;
}

.comment-header {
	display:          flex;
	justify-content:  space-between;
	margin-block-end: var(--space-xs);
}

.comment-author {
	color:     var(--text-accent);
	font-size: var(--text-xs);
}

.comment-date {
	color:     var(--text-secondary);
	font-size: var(--text-xs);
}

.comment-body {
	color:         var(--text-primary);
	font-size:     var(--text-sm);
	line-height:   1.6;
	white-space:   pre-wrap;
	overflow-wrap: break-word;
}

/* ── 45b. Board Meta Modal ── */

.board-meta-explain {
	color:     var(--text-secondary);
	font-size: var(--text-sm);
}

.board-meta-footer {
	justify-content: space-between;
}

.shared-item-type {
	font-size:          var(--text-xs);
	color:              var(--text-secondary);
	opacity:            0.7;
	margin-inline-start: var(--space-xs);
}

/* ── 46. Links Responsive ── */

@media (max-width: 39.9375rem) {
	.links-layout {
		padding: var(--space-lg);
	}

	.link-modal-card-wide {
		max-width: 95%;
	}
}

/* ─────────────────────────────────────────────
   47. Books Page
   ───────────────────────────────────────────── */

.books-filter-btns {
	display:   flex;
	gap:       var(--space-xs);
	flex-shrink: 0;
}

.books-filter-btn {
	background:    transparent;
	border:        1px solid var(--border-color);
	border-radius: 0.25rem;
	color:         var(--text-secondary);
	font-family:   var(--font-mono);
	font-size:     var(--text-xs);
	padding:       var(--space-xs) var(--space-sm);
	cursor:        pointer;
	transition:    color var(--transition-fast),
	               border-color var(--transition-fast);
}

.books-filter-btn:hover {
	color:        var(--text-accent);
	border-color: var(--text-accent);
}

.books-filter-btn-active {
	color:        var(--text-accent);
	border-color: var(--text-accent);
}

/* ── 47b. Book Detail Modal Layout ── */

.book-detail-meta {
	display:          flex;
	flex-direction:   column;
	gap:              var(--space-xs);
	margin-block-end: var(--space-md);
	padding-block-end: var(--space-md);
	border-block-end: 1px solid var(--border-color);
}

.book-detail-field {
	font-size: var(--text-sm);
	line-height: 1.6;
}

.book-detail-field .tag-pill {
	vertical-align: middle;
}

.book-detail-label {
	color:     var(--text-secondary);
	font-size: var(--text-xs);
}

.book-detail-value {
	color: var(--text-primary);
}

.book-detail-field-meta {
	margin-block-start: var(--space-xs);
	color:              var(--text-secondary);
	font-size:          var(--text-xs);
}

.book-action-row {
	display:          flex;
	flex-wrap:        wrap;
	gap:              var(--space-sm);
	padding-block:    var(--space-sm);
}

.book-action-row-secondary {
	padding-block-end: var(--space-md);
	border-block-end:  1px solid var(--border-color);
}

.book-sub-panel {
	padding-block:     var(--space-md);
	border-block-end:  1px solid var(--border-color);
}

.book-sub-panel[hidden] {
	display: none;
}

.book-sub-panel-body {
	display:        flex;
	flex-direction: column;
	gap:            var(--space-sm);
	margin-block-end: var(--space-sm);
}

.book-sub-panel-footer {
	display:         flex;
	justify-content: flex-end;
	gap:             var(--space-sm);
}

.book-detail-activity {
	padding-block-start: var(--space-md);
}

/* ── 47c. Status Pill Variants ── */

.tag-pill-status {
	display:       inline-block;
	padding:       0.1em 0.5em;
	border-radius: 0.75rem;
	font-size:     var(--text-xs);
	white-space:   nowrap;
}

.tag-pill-status-reading {
	background:   rgba(125, 211, 252, 0.12);
	border:       1px solid rgba(125, 211, 252, 0.4);
	color:        var(--text-accent);
}

.tag-pill-status-to-read {
	background:   rgba(148, 163, 184, 0.12);
	border:       1px solid rgba(148, 163, 184, 0.3);
	color:        var(--text-secondary);
}

.tag-pill-status-read {
	background:   rgba(74, 222, 128, 0.12);
	border:       1px solid rgba(74, 222, 128, 0.3);
	color:        #4ade80;
}

.books-status-actions {
	display:   flex;
	flex-wrap: wrap;
	gap:       var(--space-sm);
	margin-block-start: var(--space-sm);
}

.book-search-section-title {
	color:              var(--text-secondary);
	font-size:          var(--text-xs);
	text-transform:     uppercase;
	letter-spacing:     0.05em;
	padding:            var(--space-sm) 0;
	margin-block-start: var(--space-sm);
	border-block-end:   1px solid var(--border-color);
}

.book-search-item {
	display:        flex;
	flex-direction: column;
	padding:        var(--space-sm) var(--space-xs);
	cursor:         pointer;
	border-block-end: 1px solid var(--border-color);
	transition:     color var(--transition-fast);
}

.book-search-item:hover {
	color: var(--text-accent);
}

.book-search-item-title {
	font-size: var(--text-sm);
}

.book-search-item-author {
	font-size: var(--text-xs);
	color:     var(--text-secondary);
}

.book-search-item-exists {
	font-size:  var(--text-xs);
	color:      var(--text-secondary);
	font-style: italic;
}

.book-rec-btn-active {
	border-color: var(--text-accent);
	background:   rgba(125, 211, 252, 0.12);
}

.book-rec-counts {
	position:    absolute;
	top:         var(--space-md);
	right:       var(--space-lg);
	display:     flex;
	align-items: center;
	gap:         var(--space-sm);
}

.book-rec-count {
	display:     flex;
	align-items: center;
	gap:         2px;
	font-size:   var(--text-xs);
	color:       var(--text-secondary);
}

.thumb-icon {
	width:          16px;
	height:         16px;
	vertical-align: middle;
}

.thumb-icon-sm {
	width:          14px;
	height:         14px;
	vertical-align: middle;
}

@media (max-width: 39.9375rem) {
	.books-filter-btns {
		flex-wrap: wrap;
	}
}