/**
 * Livsbogen, main stylesheet
 *
 * A literary, warm aesthetic. Paper and ink. Mobile-first.
 *
 * Type: Georgia (universal system serif)
 * Palette: cream paper, dark ink, deep terracotta accent
 */

/* =========================================================================
   1. Variables, base reset, typography
   ========================================================================= */

:root {
	--lb-paper:        #f6efe1;
	--lb-paper-deep:   #ede4d0;
	--lb-paper-soft:   #faf5e9;
	--lb-ink:          #1a1814;
	--lb-ink-soft:     #5a544a;
	--lb-ink-faint:    #75695e;
	--lb-accent:       #8e2e1c;
	--lb-accent-deep:  #6b1f10;
	--lb-accent-soft:  #c97a5e;
	--lb-line:         #c9bfa8;
	--lb-line-soft:    #ddd2b8;
	--lb-line-faint:   #ebe2cc;

	/* Chapter colors, each gets a soft hue. */
	--lb-c-steder:       #5d7158;   /* moss */
	--lb-c-koncerter:    #8e2e1c;   /* terracotta */
	--lb-c-venner:       #8a5f25;   /* honey */
	--lb-c-kaerlighed:   #8e5c4d;   /* dusty rose */
	--lb-c-boern:        #675480;   /* dusty plum */
	--lb-c-rejser:       #3e6e92;   /* sky */
	--lb-c-begivenheder: #2f5b6e;   /* deep teal */

	--lb-font-display: Georgia, 'Times New Roman', serif;
	--lb-font-body:    Georgia, 'Times New Roman', serif;

	--lb-radius:       8px;
	--lb-radius-lg:    14px;

	--lb-shadow-sm:    0 1px 2px rgba(26, 24, 20, 0.04), 0 1px 3px rgba(26, 24, 20, 0.06);
	--lb-shadow:       0 2px 4px rgba(26, 24, 20, 0.05), 0 4px 12px rgba(26, 24, 20, 0.07);
	--lb-shadow-lg:    0 4px 8px rgba(26, 24, 20, 0.06), 0 12px 28px rgba(26, 24, 20, 0.10);

	--lb-max:          900px;
	--lb-max-narrow:   620px;
}

/* Scope our styles inside .livsbogen-page so we don't pollute the theme. */
.livsbogen-page {
	font-family: var(--lb-font-body);
	color: var(--lb-ink);
	background: var(--lb-paper);
	line-height: 1.6;
	font-weight: 400;
	font-size: 17px;
	min-height: 70vh;
	padding: 24px 0 80px;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* When body has a Livsbogen page, paint the whole background. */
body.livsbogen-active,
body:has(.livsbogen-page) {
	background: var(--lb-paper);
}

.livsbogen-page * {
	box-sizing: border-box;
}

.livsbogen-container,
.livsbogen-container-narrow {
	width: 100%;
	margin: 0 auto;
	padding: 0 20px;
}
.livsbogen-container       { max-width: var(--lb-max); }
.livsbogen-container-narrow { max-width: var(--lb-max-narrow); }

@media (min-width: 720px) {
	.livsbogen-page { padding: 40px 0 120px; font-size: 18px; }
	.livsbogen-container, .livsbogen-container-narrow { padding: 0 32px; }
}

/* Typography */
.livsbogen-page h1,
.livsbogen-page h2,
.livsbogen-page h3,
.livsbogen-page h4 {
	font-family: var(--lb-font-display);
	font-weight: 500;
	line-height: 1.15;
	letter-spacing: -0.01em;
	color: var(--lb-ink);
	margin: 0 0 0.5em;
}

.livsbogen-display {
	font-family: var(--lb-font-display);
	font-weight: 400;
	font-size: clamp(2rem, 5vw + 1rem, 3.4rem);
	line-height: 1.05;
	letter-spacing: -0.015em;
	margin: 0 0 0.4em;
}
.livsbogen-display-md {
	font-family: var(--lb-font-display);
	font-weight: 400;
	font-size: clamp(1.5rem, 2.5vw + 0.8rem, 2.1rem);
	line-height: 1.15;
	letter-spacing: -0.01em;
	margin: 0 0 0.5em;
}

.livsbogen-eyebrow {
	font-family: var(--lb-font-body);
	font-size: 0.78rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--lb-ink-soft);
	margin: 0 0 0.6em;
	font-weight: 500;
}

.livsbogen-lead {
	font-family: var(--lb-font-body);
	font-size: 1.12em;
	color: var(--lb-ink-soft);
	margin: 0 0 1.6em;
	max-width: 50ch;
	font-weight: 400;
}

.livsbogen-page p {
	margin: 0 0 1em;
}

/* Naked anchors (no class) inside Livsbogen pages get the default accent style.
   Classed anchors (.livsbogen-btn, .livsbogen-back, .livsbogen-link, etc.)
   manage their own colors. The :not([class]) scoping prevents this rule
   from overriding button/link/card colors via specificity. */
.livsbogen-page a:not([class]) {
	color: var(--lb-accent);
	text-decoration: none;
	border-bottom: 1px solid currentColor;
	transition: color 0.15s ease;
}
.livsbogen-page a:not([class]):hover { color: var(--lb-accent-deep); }

.livsbogen-link {
	color: var(--lb-accent);
	border-bottom: 1px solid currentColor;
}
.livsbogen-link:hover { color: var(--lb-accent-deep); }

/* =========================================================================
   2. Logo
   ========================================================================= */

.livsbogen-logo-link {
	display: inline-block;
	border-bottom: 0;
	margin-bottom: 28px;
	color: var(--lb-ink);
}
.livsbogen-logo-link:hover { color: var(--lb-accent); }

.livsbogen-logo {
	font-family: var(--lb-font-display);
	font-size: 1.6rem;
	font-weight: 500;
	letter-spacing: -0.01em;
}

/* =========================================================================
   3. Buttons
   ========================================================================= */

.livsbogen-btn,
.livsbogen-btn-primary,
.livsbogen-btn-ghost {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 12px 22px;
	border-radius: var(--lb-radius);
	font-family: var(--lb-font-body);
	font-size: 1rem;
	font-weight: 500;
	line-height: 1.2;
	cursor: pointer;
	transition: all 0.18s ease;
	text-decoration: none;
	border: 1px solid transparent;
	background: transparent;
	color: var(--lb-ink);
}

.livsbogen-btn-primary {
	background: var(--lb-accent);
	color: #fdfaf3;
	border-color: var(--lb-accent);
}
.livsbogen-btn-primary:hover {
	background: var(--lb-accent-deep);
	border-color: var(--lb-accent-deep);
	color: #fff;
	transform: translateY(-1px);
	box-shadow: var(--lb-shadow);
}

.livsbogen-btn-ghost {
	background: transparent;
	color: var(--lb-ink);
	border-color: var(--lb-line);
}
.livsbogen-btn-ghost:hover {
	background: var(--lb-paper-deep);
	border-color: var(--lb-ink);
}
.livsbogen-btn-ghost[disabled],
.livsbogen-btn-ghost[aria-disabled="true"] {
	opacity: 0.5;
	cursor: not-allowed;
	pointer-events: none;
}

/* Destructive action button. Used for delete actions. Quiet by default
   (no fill, muted red border) so it doesn't shout next to "Rediger",
   but turns into a solid red on hover so the user feels the weight of
   what they're about to do. */
.livsbogen-btn-danger {
	background: transparent;
	color: #8e2e1c;
	border-color: rgba(142, 46, 28, 0.4);
}
.livsbogen-btn-danger:hover {
	background: #8e2e1c;
	color: #fdfaf3;
	border-color: #8e2e1c;
}

/* When buttons contain SVG icons, give them a small gap from the label
   and align the icon with the text baseline. */
.livsbogen-btn svg {
	display: inline-block;
	vertical-align: -3px;
	margin-right: 6px;
}

.livsbogen-btn-large {
	padding: 16px 28px;
	font-size: 1.08rem;
}

.livsbogen-btn-link {
	background: none;
	border: 0;
	color: var(--lb-accent);
	cursor: pointer;
	font-family: inherit;
	font-size: 0.95rem;
	padding: 6px 0;
	text-decoration: none;
	border-bottom: 1px solid var(--lb-accent);
}
.livsbogen-btn-link:hover { color: var(--lb-accent-deep); border-bottom-color: var(--lb-accent-deep); }

/* Defense in depth: explicit color overrides on button-anchor combinations,
   so even if a theme or another plugin tries to set link colors or underlines
   at higher specificity, the button styling stays correct. We re-assert
   border-color at this specificity for both ghost and primary so the bottom
   border doesn't get clobbered by theme underline rules. */
.livsbogen-page a.livsbogen-btn,
.livsbogen-page a.livsbogen-btn-primary,
.livsbogen-page a.livsbogen-btn-ghost {
	color: var(--lb-ink);
	text-decoration: none;
}
.livsbogen-page a.livsbogen-btn-primary {
	border-color: var(--lb-accent);
	color: #fdfaf3;
}
.livsbogen-page a.livsbogen-btn-primary:hover {
	border-color: var(--lb-accent-deep);
	color: #fff;
}
.livsbogen-page a.livsbogen-btn-ghost {
	border-color: var(--lb-line);
}
.livsbogen-page a.livsbogen-btn-ghost:hover {
	border-color: var(--lb-ink);
	color: var(--lb-ink);
}

.livsbogen-icon-btn {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--lb-line);
	background: var(--lb-paper-soft);
	color: var(--lb-ink-soft);
	cursor: pointer;
	transition: all 0.15s ease;
}
.livsbogen-icon-btn:hover {
	color: var(--lb-accent);
	border-color: var(--lb-accent);
}

/* =========================================================================
   4. Forms
   ========================================================================= */

.livsbogen-form { margin-top: 8px; }

.livsbogen-field { margin-bottom: 24px; }

.livsbogen-field label {
	display: block;
	font-size: 0.92rem;
	font-weight: 500;
	color: var(--lb-ink);
	margin-bottom: 7px;
	letter-spacing: 0.01em;
}

.livsbogen-form-row-split {
	display: grid;
	grid-template-columns: 1fr;
	gap: 16px;
}
@media (min-width: 540px) {
	.livsbogen-form-row-split { grid-template-columns: 1fr 1fr; gap: 18px; }
}

.livsbogen-page input[type="text"],
.livsbogen-page input[type="email"],
.livsbogen-page input[type="number"],
.livsbogen-page input[type="password"],
.livsbogen-page input[type="date"],
.livsbogen-page input[type="search"],
.livsbogen-page select,
.livsbogen-page textarea {
	width: 100%;
	padding: 13px 14px;
	font-family: var(--lb-font-body);
	font-size: 1rem;
	line-height: 1.4;
	color: var(--lb-ink);
	background: var(--lb-paper-soft);
	border: 1px solid var(--lb-line);
	border-radius: var(--lb-radius);
	transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
	-webkit-appearance: none;
	appearance: none;
}

.livsbogen-page input[type="text"]:focus,
.livsbogen-page input[type="email"]:focus,
.livsbogen-page input[type="number"]:focus,
.livsbogen-page input[type="password"]:focus,
.livsbogen-page input[type="date"]:focus,
.livsbogen-page input[type="search"]:focus,
.livsbogen-page select:focus,
.livsbogen-page textarea:focus {
	outline: none;
	border-color: var(--lb-accent);
	box-shadow: 0 0 0 3px rgba(142, 46, 28, 0.15);
	background: #fff;
}

.livsbogen-page textarea { min-height: 130px; resize: vertical; }

.livsbogen-page select {
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='none' stroke='%235a544a' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' d='M1 1l5 5 5-5'/></svg>");
	background-repeat: no-repeat;
	background-position: calc(100% - 14px) center;
	padding-right: 38px;
}

.livsbogen-hint {
	display: block;
	margin-top: 6px;
	font-size: 0.85rem;
	color: var(--lb-ink-faint);
	font-style: italic;
}
.livsbogen-hint-ok { color: #4a6d3f; font-style: normal; font-weight: 500; }
.livsbogen-hint-err { color: var(--lb-accent); font-style: normal; font-weight: 500; }

.livsbogen-checkbox {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 10px;
	font-size: 0.95rem;
	color: var(--lb-ink-soft);
	cursor: pointer;
}
.livsbogen-checkbox input { width: 18px; height: 18px; accent-color: var(--lb-accent); cursor: pointer; }

.livsbogen-username-wrap {
	display: flex;
	align-items: stretch;
	border: 1px solid var(--lb-line);
	border-radius: var(--lb-radius);
	background: var(--lb-paper-soft);
	overflow: hidden;
}
.livsbogen-username-wrap:focus-within {
	border-color: var(--lb-accent);
	box-shadow: 0 0 0 3px rgba(142, 46, 28, 0.15);
}
.livsbogen-username-prefix {
	padding: 13px 12px;
	background: var(--lb-paper-deep);
	color: var(--lb-ink-soft);
	font-size: 0.9rem;
	border-right: 1px solid var(--lb-line);
	white-space: nowrap;
	display: flex;
	align-items: center;
}
.livsbogen-username-wrap input {
	border: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	padding-left: 12px !important;
	flex: 1;
}

.livsbogen-form-foot {
	margin-top: 20px;
	font-size: 0.95rem;
	color: var(--lb-ink-soft);
	text-align: center;
}

.livsbogen-form-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 28px;
}

.livsbogen-form-status {
	margin-top: 16px;
	padding: 12px 14px;
	border-radius: var(--lb-radius);
	font-size: 0.95rem;
	background: var(--lb-paper-deep);
	color: var(--lb-ink-soft);
}
.livsbogen-form-status-ok { background: #e8efe2; color: #3d5e34; }
.livsbogen-form-status-err { background: #f2dcd6; color: var(--lb-accent-deep); }

/* Settings page: stacked label + input pairs. */
.livsbogen-form-fields {
	max-width: 420px;
	margin-top: 12px;
}
.livsbogen-form-fields label {
	display: block;
	margin-top: 14px;
	margin-bottom: 4px;
	font-weight: 500;
	color: var(--lb-ink);
}
.livsbogen-form-fields label:first-child {
	margin-top: 0;
}
.livsbogen-form-fields input[type="password"] {
	width: 100%;
}
.livsbogen-form-fields .livsbogen-hint {
	margin-top: 4px;
}
.livsbogen-form-fields button {
	margin-top: 20px;
}

/* Settings: optional day+month next to the birth year. */
.livsbogen-birth-detail-row {
	display: flex;
	gap: 10px;
}
.livsbogen-birth-detail-row select { flex: 1 1 auto; }
.livsbogen-birth-detail-row input[type="number"] { flex: 0 0 90px; }

/* Small inline status badge (e.g. email verified state). */
.livsbogen-badge {
	display: inline-block;
	margin-left: 8px;
	padding: 2px 10px;
	border-radius: 999px;
	font-size: 0.85rem;
	background: var(--lb-paper-deep);
	color: var(--lb-ink-soft);
	border: 1px solid var(--lb-line);
	vertical-align: middle;
}
.livsbogen-badge-ok {
	background: #e8efe2;
	color: #3d5e34;
	border-color: #b8d4b8;
}

.livsbogen-alert {
	padding: 14px 16px;
	border-radius: var(--lb-radius);
	margin-bottom: 22px;
	border: 1px solid var(--lb-line);
}
.livsbogen-alert-error {
	background: #f6e3dd;
	border-color: var(--lb-accent-soft);
	color: var(--lb-accent-deep);
}
.livsbogen-alert p { margin: 0 0 4px; }
.livsbogen-alert p:last-child { margin: 0; }

.livsbogen-input-with-mic {
	position: relative;
}
.livsbogen-input-with-mic input,
.livsbogen-input-with-mic textarea {
	padding-right: 48px;
}
.livsbogen-mic-btn {
	position: absolute;
	right: 8px;
	top: 8px;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	border: 1px solid var(--lb-line);
	background: var(--lb-paper-soft);
	color: var(--lb-ink-soft);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: all 0.15s ease;
}
.livsbogen-mic-btn:hover {
	color: var(--lb-accent);
	border-color: var(--lb-accent);
}
.livsbogen-mic-btn.listening {
	background: var(--lb-accent);
	border-color: var(--lb-accent);
	color: #fff;
	animation: lb-pulse 1.4s ease-in-out infinite;
}
@keyframes lb-pulse {
	0%, 100% { box-shadow: 0 0 0 0 rgba(142, 46, 28, 0.5); }
	50%      { box-shadow: 0 0 0 10px rgba(142, 46, 28, 0); }
}

/* =========================================================================
   5. Auth pages (register, login)
   ========================================================================= */

.livsbogen-auth-page {
	display: flex;
	align-items: flex-start;
	justify-content: center;
	min-height: calc(100vh - 200px);
	padding-top: 48px;
}

.livsbogen-auth-card {
	width: 100%;
	max-width: 460px;
	padding: 32px 24px;
}

@media (min-width: 540px) {
	.livsbogen-auth-card {
		padding: 48px;
		background: var(--lb-paper-soft);
		border: 1px solid var(--lb-line-faint);
		border-radius: var(--lb-radius-lg);
		box-shadow: var(--lb-shadow);
	}
}

.livsbogen-auth-card .livsbogen-display { font-size: clamp(1.8rem, 4vw + 0.8rem, 2.4rem); }

/* =========================================================================
   6. Onboarding
   ========================================================================= */

.livsbogen-onboarding-page { padding-top: 32px; }
.livsbogen-onboard-header { margin-bottom: 32px; }

.livsbogen-onboard-step {
	animation: lb-fade-in 0.4s ease-out both;
}
@keyframes lb-fade-in {
	from { opacity: 0; transform: translateY(8px); }
	to   { opacity: 1; transform: translateY(0); }
}

.livsbogen-onboard-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px;
	margin-top: 24px;
	justify-content: space-between;
}

.livsbogen-chapter-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 12px;
	margin: 24px 0;
}
@media (min-width: 540px) {
	.livsbogen-chapter-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 800px) {
	.livsbogen-chapter-grid { grid-template-columns: repeat(3, 1fr); }
}

.livsbogen-chapter-card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 12px;
	padding: 22px 22px 24px;
	background: var(--lb-paper-soft);
	border: 1px solid var(--lb-line);
	border-radius: var(--lb-radius-lg);
	color: var(--lb-ink);
	text-decoration: none;
	border-bottom: 1px solid var(--lb-line);
	transition: all 0.18s ease;
	cursor: pointer;
}
.livsbogen-chapter-card:hover {
	background: #fff;
	border-color: var(--lb-accent);
	transform: translateY(-2px);
	box-shadow: var(--lb-shadow);
	color: var(--lb-ink);
}

.livsbogen-chapter-icon {
	width: 36px;
	height: 36px;
	color: var(--lb-accent);
}
.livsbogen-chapter-icon svg { width: 100%; height: 100%; }

.livsbogen-chapter-name {
	font-family: var(--lb-font-display);
	font-size: 1.15rem;
	font-weight: 500;
	line-height: 1.25;
}

.livsbogen-chapter-count {
	font-size: 0.85rem;
	color: var(--lb-ink-faint);
	margin-top: -4px;
}

/* =========================================================================
   7. Dashboard
   ========================================================================= */

.livsbogen-dashboard-head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 32px;
}
.livsbogen-dashboard-head-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
}

.livsbogen-card {
	background: var(--lb-paper-soft);
	border: 1px solid var(--lb-line-faint);
	border-radius: var(--lb-radius-lg);
	padding: 24px;
	margin: 0 0 32px;
	box-shadow: var(--lb-shadow-sm);
}

.livsbogen-card-prompt {
	background: linear-gradient(180deg, #fdfaf3 0%, var(--lb-paper-soft) 100%);
	border: 1px solid var(--lb-line);
	border-left: 4px solid var(--lb-accent);
	padding: 28px 24px;
}
.livsbogen-card-prompt .livsbogen-display-md { margin-bottom: 0.6em; }
.livsbogen-prompt-hint {
	font-size: 0.95rem;
	color: var(--lb-ink-soft);
	font-style: italic;
	margin: 0 0 20px;
}

/* Flashback / "Tilbageblik" card. Modeled on the prompt card but with a
   left-border in a softer color so it feels like a sibling, not a competitor.
   List items inside it are full-width clickable links to the memory. */
.livsbogen-card-flashback {
	border-left: 4px solid var(--lb-c-kaerlighed, #a16c5c);
	padding: 24px;
}
.livsbogen-flashback-list {
	list-style: none;
	margin: 12px 0 0;
	padding: 0;
}
.livsbogen-flashback-item {
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--lb-line-faint);
}
.livsbogen-flashback-item:first-child {
	border-top: 0;
}
.livsbogen-flashback-link {
	display: block;
	padding: 14px 0;
	text-decoration: none;
	color: var(--lb-ink);
}
.livsbogen-flashback-link:hover {
	text-decoration: none;
}
.livsbogen-flashback-link:hover .livsbogen-flashback-title {
	text-decoration: underline;
	text-underline-offset: 3px;
}
.livsbogen-flashback-when {
	display: block;
	font-size: 0.88rem;
	color: var(--lb-ink-soft);
	font-style: italic;
	margin-bottom: 4px;
}
.livsbogen-flashback-title {
	display: block;
	font-family: var(--lb-font-display);
	font-size: 1.15rem;
	color: var(--lb-ink);
}

/* Danger zone: account deletion. Folded inside a <details> element so it
   stays out of the way until the user explicitly opens it. The summary
   line is muted but the body uses warning colors when expanded. */
.livsbogen-card-welcome-back {
	background: #ecf3ec;
	border: 1px solid #b8d4b8;
	color: var(--lb-ink);
}
.livsbogen-card-welcome-back p { margin: 0; }

/* Confirmation after saving a memory (?gemt={id} on dashboard and /tilfoej). */
.livsbogen-card-saved {
	background: #ecf3ec;
	border: 1px solid #b8d4b8;
	color: var(--lb-ink);
}
.livsbogen-card-saved p { margin: 0; }
.livsbogen-card-saved p + p { margin-top: 6px; }

.livsbogen-card-danger {
	border: 1px solid var(--lb-line);
	background: var(--lb-paper-soft);
	margin-top: 48px;
}
.livsbogen-card-danger summary {
	cursor: pointer;
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 8px;
	color: var(--lb-ink-soft);
	font-size: 0.95rem;
}
.livsbogen-card-danger summary::-webkit-details-marker {
	display: none;
}
.livsbogen-card-danger summary::before {
	content: '▸';
	display: inline-block;
	color: var(--lb-ink-faint);
	transition: transform 0.15s ease;
}
.livsbogen-card-danger[open] > summary::before,
.livsbogen-card-danger details[open] > summary::before {
	transform: rotate(90deg);
}
.livsbogen-danger-summary-title {
	color: var(--lb-ink);
	font-weight: 500;
}
.livsbogen-danger-summary-hint {
	color: var(--lb-ink-faint);
	font-style: italic;
	font-size: 0.88rem;
}
.livsbogen-danger-body {
	margin-top: 18px;
	padding: 18px 20px;
	background: #fef5f0;
	border: 1px solid #e8c8b8;
	border-radius: var(--lb-radius);
	color: var(--lb-ink);
}
.livsbogen-danger-body p { margin: 0 0 12px; }
.livsbogen-danger-body code {
	background: rgba(142, 46, 28, 0.08);
	padding: 2px 6px;
	border-radius: 4px;
	font-family: monospace;
	font-size: 0.95em;
}
.livsbogen-danger-body input[type="text"],
.livsbogen-danger-body textarea {
	display: block;
	margin-top: 6px;
	padding: 10px 12px;
	width: 100%;
	max-width: 480px;
	border: 1px solid var(--lb-line);
	border-radius: var(--lb-radius);
	font-family: inherit;
	font-size: 1rem;
	background: #fff;
	color: var(--lb-ink);
}
.livsbogen-danger-body input[type="text"] {
	max-width: 320px;
}
.livsbogen-danger-body textarea {
	resize: vertical;
	min-height: 70px;
	line-height: 1.5;
}
.livsbogen-danger-list {
	margin: 0 0 12px 18px;
	padding: 0;
	color: var(--lb-ink-soft);
}
.livsbogen-danger-list li { margin: 2px 0; }
.livsbogen-delete-status {
	display: inline-block;
	margin-left: 12px;
	color: var(--lb-ink-soft);
	font-size: 0.95rem;
}
.livsbogen-delete-status-error {
	color: var(--lb-accent);
}

.livsbogen-stats {
	display: flex;
	gap: 24px;
	flex-wrap: wrap;
	margin-bottom: 40px;
	padding: 18px 0;
	border-top: 1px solid var(--lb-line-faint);
	border-bottom: 1px solid var(--lb-line-faint);
}
.livsbogen-stat { display: flex; flex-direction: column; align-items: flex-start; }
.livsbogen-stat-value {
	font-family: var(--lb-font-display);
	font-size: 1.8rem;
	font-weight: 500;
	color: var(--lb-ink);
	line-height: 1;
}
.livsbogen-stat-label {
	font-size: 0.85rem;
	color: var(--lb-ink-soft);
	margin-top: 4px;
	letter-spacing: 0.02em;
}

.livsbogen-section { margin-bottom: 40px; }
.livsbogen-section-title {
	font-family: var(--lb-font-display);
	font-size: 1.5rem;
	font-weight: 500;
	margin: 0 0 18px;
}

.livsbogen-recent-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 1px;
	background: var(--lb-line-faint);
	border-radius: var(--lb-radius);
	overflow: hidden;
	border: 1px solid var(--lb-line-faint);
}
.livsbogen-recent-item { background: var(--lb-paper-soft); }
.livsbogen-recent-link {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 14px 16px;
	color: var(--lb-ink);
	border-bottom: 0;
	transition: background-color 0.15s ease;
}
.livsbogen-recent-link:hover { background: #fff; color: var(--lb-ink); }

.livsbogen-recent-thumb {
	flex-shrink: 0;
	width: 56px;
	height: 56px;
	border-radius: 6px;
	overflow: hidden;
	background: var(--lb-paper-deep);
	display: flex;
	align-items: center;
	justify-content: center;
}
.livsbogen-recent-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.livsbogen-recent-thumb-empty {
	color: var(--lb-ink-faint);
}
.livsbogen-recent-thumb-empty svg { width: 24px; height: 24px; }

.livsbogen-recent-body { flex: 1; min-width: 0; }
.livsbogen-recent-title {
	display: block;
	font-family: var(--lb-font-display);
	font-size: 1.05rem;
	font-weight: 500;
	color: var(--lb-ink);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.livsbogen-recent-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 2px;
	font-size: 0.85rem;
	color: var(--lb-ink-soft);
	align-items: center;
}

.livsbogen-tag {
	display: inline-block;
	padding: 2px 9px;
	background: var(--lb-paper-deep);
	color: var(--lb-ink-soft);
	border-radius: 999px;
	font-size: 0.78rem;
	letter-spacing: 0.04em;
}

/* =========================================================================
   8. Add memory page
   ========================================================================= */

.livsbogen-add-page { }
.livsbogen-add-head { margin-bottom: 24px; }

.livsbogen-back {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--lb-ink-soft);
	font-size: 0.95rem;
	border-bottom: 0;
}
.livsbogen-back:hover { color: var(--lb-accent); }

.livsbogen-prompt-context {
	background: var(--lb-paper-soft);
	border-left: 3px solid var(--lb-accent);
	padding: 16px 20px;
	border-radius: 0 var(--lb-radius) var(--lb-radius) 0;
	margin-bottom: 28px;
}
.livsbogen-prompt-context .livsbogen-eyebrow { margin-bottom: 4px; }
.livsbogen-prompt-quote {
	font-family: var(--lb-font-display);
	font-size: 1.15rem;
	font-style: italic;
	color: var(--lb-ink);
	margin: 0;
	line-height: 1.4;
}

.livsbogen-chapter-pick {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
	gap: 10px;
}
.livsbogen-chapter-pick-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 16px 12px;
	background: var(--lb-paper-soft);
	border: 1px solid var(--lb-line);
	border-radius: var(--lb-radius);
	cursor: pointer;
	transition: all 0.15s ease;
	text-align: center;
}
.livsbogen-chapter-pick-item:hover {
	border-color: var(--lb-accent);
	background: #fff;
}
.livsbogen-chapter-pick-item input {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
}
.livsbogen-chapter-pick-item:has(input:checked) {
	border-color: var(--lb-accent);
	background: #fff;
	box-shadow: 0 0 0 2px var(--lb-accent);
}
.livsbogen-chapter-pick-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	color: var(--lb-accent);
}
.livsbogen-chapter-pick-icon svg { width: 100%; height: 100%; display: block; }
.livsbogen-chapter-pick-label {
	font-family: var(--lb-font-display);
	font-size: 0.95rem;
	color: var(--lb-ink);
}

.livsbogen-when-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
}
@media (min-width: 540px) {
	.livsbogen-when-row { grid-template-columns: 1fr 1.3fr; }
}

.livsbogen-field-conditional { margin-top: 12px; }

.livsbogen-image-preview {
	margin-top: 12px;
	border: 1px dashed var(--lb-line);
	border-radius: var(--lb-radius);
	padding: 10px;
	background: var(--lb-paper-soft);
}
.livsbogen-image-preview img {
	max-width: 100%;
	max-height: 240px;
	border-radius: 6px;
	display: block;
	margin: 0 auto;
}

input[type="file"] {
	font-family: inherit;
	color: var(--lb-ink-soft);
}

/* Styled file picker: the native input is visually hidden but stays
   focusable, so the focus ring lands on the label-button next to it. */
.livsbogen-file-input {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}
/* Extra specificity: .livsbogen-field label would otherwise force the
   label-button to display:block and stretch it to the container width. */
.livsbogen-file-btn,
.livsbogen-field label.livsbogen-file-btn {
	cursor: pointer;
	display: inline-block;
	width: auto;
	margin-bottom: 0;
}
.livsbogen-file-input:focus + .livsbogen-file-btn,
.livsbogen-file-input:focus-visible + .livsbogen-file-btn {
	outline: 2px solid var(--lb-accent);
	outline-offset: 2px;
}
.livsbogen-file-name {
	display: inline-block;
	max-width: 260px;
	margin-left: 10px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	vertical-align: middle;
	color: var(--lb-ink-soft);
	font-size: 0.95rem;
}

/* =========================================================================
   9. Profile / Timeline
   ========================================================================= */

.livsbogen-profile-page {
	padding-top: 0;
}

.livsbogen-cover {
	width: 100%;
	height: 200px;
	background-size: cover;
	background-position: center;
	background-color: var(--lb-paper-deep);
	margin-bottom: -60px;
	position: relative;
}
.livsbogen-cover::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, transparent 30%, var(--lb-paper) 100%);
}
.livsbogen-cover-empty {
	background: linear-gradient(135deg, #ede4d0 0%, #f6efe1 50%, #e8dcc1 100%);
	height: 140px;
}
@media (min-width: 720px) {
	.livsbogen-cover { height: 260px; margin-bottom: -80px; }
	.livsbogen-cover-empty { height: 180px; }
}

.livsbogen-profile-header {
	position: relative;
	text-align: center;
	padding: 24px 0 32px;
	margin-bottom: 32px;
	border-bottom: 1px solid var(--lb-line-faint);
}

.livsbogen-profile-avatar {
	width: 112px;
	height: 112px;
	border-radius: 50%;
	overflow: hidden;
	margin: 0 auto 18px;
	background: var(--lb-paper-soft);
	border: 4px solid var(--lb-paper);
	box-shadow: var(--lb-shadow);
	display: flex;
	align-items: center;
	justify-content: center;
}
.livsbogen-profile-avatar img { width: 100%; height: 100%; object-fit: cover; }
.livsbogen-avatar-initials {
	font-family: var(--lb-font-display);
	font-size: 2.5rem;
	font-weight: 500;
	color: var(--lb-accent);
	line-height: 1;
}

.livsbogen-profile-name {
	margin: 0 0 0.2em;
	font-size: clamp(2rem, 5vw + 1rem, 3rem);
}

.livsbogen-profile-lifespan {
	font-family: var(--lb-font-display);
	font-style: italic;
	font-size: 1.1rem;
	color: var(--lb-ink-soft);
	margin: 0 0 16px;
}

.livsbogen-profile-tagline {
	max-width: 50ch;
	margin: 0 auto 18px;
	font-size: 1.08rem;
	color: var(--lb-ink-soft);
	line-height: 1.5;
}

.livsbogen-profile-stats {
	display: flex;
	justify-content: center;
	gap: 14px;
	font-size: 0.95rem;
	color: var(--lb-ink-soft);
	margin-bottom: 18px;
	flex-wrap: wrap;
}
.livsbogen-profile-stats strong { color: var(--lb-ink); font-weight: 600; }

.livsbogen-profile-owner-bar {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 12px;
	margin: 16px 0 8px;
}

.livsbogen-profile-share { margin-top: 8px; }

/* Filter nav */
/* --- Guestbook ("Hilsner") ---------------------------------------- */

.livsbogen-guestbook {
	margin-top: 48px;
	padding-top: 32px;
	border-top: 1px solid var(--lb-line-faint);
}

.livsbogen-guestbook-list {
	list-style: none;
	margin: 20px 0 0;
	padding: 0;
}

.livsbogen-guestbook-entry {
	position: relative;
	padding: 16px 18px;
	margin-bottom: 12px;
	background: var(--lb-paper-soft);
	border: 1px solid var(--lb-line);
	border-radius: var(--lb-radius);
}

.livsbogen-guestbook-owner-actions {
	position: absolute;
	top: 10px;
	right: 10px;
}

.livsbogen-guestbook-message {
	margin: 0 0 8px;
}

.livsbogen-guestbook-byline {
	margin: 0;
	font-size: 0.88rem;
	color: var(--lb-ink-soft, #5a544a);
}

.livsbogen-guestbook-empty {
	color: var(--lb-ink-soft, #5a544a);
}

.livsbogen-guestbook-notice {
	padding: 12px 16px;
	border-radius: var(--lb-radius);
	border: 1px solid var(--lb-line);
	background: var(--lb-paper-soft);
}

.livsbogen-guestbook-notice-err {
	border-color: #c4614d;
}

.livsbogen-guestbook-pending-hint {
	font-size: 0.92rem;
	color: var(--lb-ink-soft, #5a544a);
}

.livsbogen-guestbook-form {
	margin-top: 24px;
	max-width: 480px;
}

.livsbogen-guestbook-form label {
	display: block;
	margin: 14px 0 6px;
	font-weight: 600;
}

.livsbogen-guestbook-form-footer {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 14px;
}

.livsbogen-guestbook-form-hint {
	font-size: 0.85rem;
	color: var(--lb-ink-soft, #5a544a);
}

/* Honeypot: moved off-screen, never display:none (some bots skip
   display:none fields). Humans never see or tab into it. */
.livsbogen-guestbook-hp {
	position: absolute;
	left: -9999px;
	top: auto;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.livsbogen-guestbook-mod-list {
	list-style: none;
	margin: 12px 0 0;
	padding: 0;
}

.livsbogen-guestbook-mod-item {
	padding: 14px 0;
	border-top: 1px solid var(--lb-line-faint);
}

.livsbogen-guestbook-mod-actions {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 8px 0 0;
}

.livsbogen-toggle-row {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 12px 0 6px;
	cursor: pointer;
}

.livsbogen-toggle-row input[type="checkbox"] {
	width: 18px;
	height: 18px;
	accent-color: var(--lb-accent);
	cursor: pointer;
}

.livsbogen-privacy-print {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 14px;
	padding-top: 14px;
	border-top: 1px solid var(--lb-line-faint);
}

.livsbogen-privacy-print .livsbogen-privacy-hint {
	margin: 0;
}

.livsbogen-timeline-search {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 18px;
}

.livsbogen-timeline-search input[type="search"] {
	flex: 1;
	max-width: 340px;
}

.livsbogen-dashboard-search {
	margin-bottom: 0;
}

.livsbogen-filter-nav {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	padding: 4px 0 14px;
	margin-bottom: 24px;
	border-bottom: 1px solid var(--lb-line-faint);
}

.livsbogen-filter {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 14px;
	border-radius: 999px;
	border: 1px solid var(--lb-line);
	background: transparent;
	color: var(--lb-ink-soft);
	font-family: inherit;
	font-size: 0.92rem;
	cursor: pointer;
	transition: all 0.15s ease;
	white-space: nowrap;
	flex-shrink: 0;
}
.livsbogen-filter:hover {
	background: var(--lb-paper-soft);
	border-color: var(--lb-ink-soft);
	color: var(--lb-ink);
}
.livsbogen-filter.active {
	background: var(--lb-ink);
	border-color: var(--lb-ink);
	color: var(--lb-paper);
}
.livsbogen-filter-icon {
	width: 16px;
	height: 16px;
	display: inline-flex;
}
.livsbogen-filter-icon svg { width: 100%; height: 100%; }
.livsbogen-filter-count {
	display: inline-block;
	background: var(--lb-paper-deep);
	color: var(--lb-ink-soft);
	border-radius: 999px;
	padding: 0 7px;
	font-size: 0.78rem;
	min-width: 22px;
	text-align: center;
	line-height: 18px;
}
.livsbogen-filter.active .livsbogen-filter-count {
	background: rgba(255, 255, 255, 0.18);
	color: var(--lb-paper);
}

/* =========================================================================
   10. Timeline
   ========================================================================= */

.livsbogen-timeline {
	position: relative;
	padding-left: 36px;
}

@media (min-width: 720px) {
	.livsbogen-timeline { padding-left: 64px; }
}

.livsbogen-timeline-line {
	position: absolute;
	left: 12px;
	top: 16px;
	bottom: 16px;
	width: 1px;
	background: linear-gradient(180deg, transparent 0%, var(--lb-line) 8%, var(--lb-line) 92%, transparent 100%);
}
@media (min-width: 720px) {
	.livsbogen-timeline-line { left: 22px; }
}

.livsbogen-timeline-year-block {
	position: relative;
	margin-bottom: 28px;
}

.livsbogen-timeline-year-marker {
	position: relative;
	margin-bottom: 14px;
	padding-left: 8px;
}
.livsbogen-timeline-year-marker::before {
	content: '';
	position: absolute;
	left: -33px;
	top: 50%;
	transform: translateY(-50%);
	width: 11px;
	height: 11px;
	border-radius: 50%;
	background: var(--lb-paper);
	border: 2px solid var(--lb-accent);
}
@media (min-width: 720px) {
	.livsbogen-timeline-year-marker::before { left: -50px; }
}

.livsbogen-timeline-year {
	font-family: var(--lb-font-display);
	font-weight: 500;
	font-size: 1.5rem;
	color: var(--lb-ink);
	letter-spacing: -0.01em;
}

.livsbogen-timeline-entries {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.livsbogen-timeline-gap {
	position: relative;
	padding: 12px 0;
	margin: 8px 0;
}
.livsbogen-timeline-gap-label {
	display: inline-block;
	font-size: 0.88rem;
	color: var(--lb-ink-faint);
	font-style: italic;
	background: var(--lb-paper);
	padding: 4px 12px;
	margin-left: -8px;
}

/* Memory cards */
.livsbogen-memory-card {
	position: relative;
	background: var(--lb-paper-soft);
	border: 1px solid var(--lb-line-faint);
	border-radius: var(--lb-radius-lg);
	overflow: hidden;
	transition: all 0.2s ease;
	box-shadow: var(--lb-shadow-sm);
}
.livsbogen-memory-card:hover {
	border-color: var(--lb-line);
	box-shadow: var(--lb-shadow);
	transform: translateY(-1px);
}

.livsbogen-memory-link {
	display: block;
	color: var(--lb-ink);
	border-bottom: 0;
}
.livsbogen-memory-link:hover { color: var(--lb-ink); }

.livsbogen-memory-image {
	width: 100%;
	height: 220px;
	overflow: hidden;
	background: var(--lb-paper-deep);
}
.livsbogen-memory-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.4s ease;
}
.livsbogen-memory-card:hover .livsbogen-memory-image img { transform: scale(1.03); }

.livsbogen-memory-body { padding: 18px 20px 20px; }
/* When content follows the body (i.e. has full text), the body should not
   contribute its own bottom padding. The content-wrap provides padding. */
.livsbogen-memory-link + .livsbogen-memory-content-wrap { margin-top: -10px; }

.livsbogen-memory-header {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px 12px;
	margin-bottom: 10px;
}

.livsbogen-memory-chapter {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: 0.78rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--lb-ink-soft);
	font-weight: 500;
}
.livsbogen-chapter-icon-sm {
	width: 14px;
	height: 14px;
	display: inline-flex;
}
.livsbogen-chapter-icon-sm svg { width: 100%; height: 100%; }

/* Per-chapter accent on memory chapter label */
.livsbogen-chapter-steder       { color: var(--lb-c-steder); }
.livsbogen-chapter-koncerter    { color: var(--lb-c-koncerter); }
.livsbogen-chapter-venner       { color: var(--lb-c-venner); }
.livsbogen-chapter-kaerlighed   { color: var(--lb-c-kaerlighed); }
.livsbogen-chapter-boern        { color: var(--lb-c-boern); }
.livsbogen-chapter-rejser       { color: var(--lb-c-rejser); }
.livsbogen-chapter-begivenheder { color: var(--lb-c-begivenheder); }

.livsbogen-memory-date {
	font-family: var(--lb-font-display);
	font-style: italic;
	font-size: 0.92rem;
	color: var(--lb-ink-faint);
}

.livsbogen-memory-title {
	font-family: var(--lb-font-display);
	font-weight: 500;
	font-size: 1.3rem;
	line-height: 1.2;
	color: var(--lb-ink);
	margin: 0 0 8px;
}

/* The original prompt this memory answered, shown discreetly above the title.
   Kept small and italic so the user's own words still dominate the card.
   Optional: many memories are written without a prompt. */
.livsbogen-memory-prompt {
	font-style: italic;
	font-size: 0.88rem;
	color: var(--lb-ink-faint);
	margin: 0 0 4px;
	line-height: 1.35;
}
.livsbogen-memory-prompt-full {
	font-size: 1rem;
	color: var(--lb-ink-soft);
	margin: 0 0 8px;
}

.livsbogen-memory-location {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: 0.88rem;
	color: var(--lb-ink-soft);
	margin: 0 0 8px;
}
.livsbogen-memory-location svg { flex-shrink: 0; opacity: 0.6; }

/* Memory content (full body, with collapse/expand for long entries) */
.livsbogen-memory-content-wrap {
	padding: 0 20px 18px;
}
.livsbogen-memory-content {
	font-size: 1rem;
	color: var(--lb-ink-soft);
	margin: 0;
	line-height: 1.55;
	white-space: normal;
	max-height: 6.2em;
	overflow: hidden;
	position: relative;
	mask-image: linear-gradient(to bottom, #000 70%, transparent 100%);
	-webkit-mask-image: linear-gradient(to bottom, #000 70%, transparent 100%);
}
/* JS sets data-fits=true on cards whose content is short enough that no
   clamping is needed. Removes both height limit and fade. */
.livsbogen-memory-card[data-fits="true"] .livsbogen-memory-content {
	max-height: none;
	mask-image: none;
	-webkit-mask-image: none;
}
.livsbogen-memory-card.is-expanded .livsbogen-memory-content {
	max-height: none;
	mask-image: none;
	-webkit-mask-image: none;
}
.livsbogen-memory-toggle {
	background: none;
	border: 0;
	padding: 8px 0 0;
	margin: 0;
	color: var(--lb-accent);
	font-family: inherit;
	font-size: 0.92rem;
	font-weight: 500;
	cursor: pointer;
	text-decoration: underline;
	text-underline-offset: 3px;
}
.livsbogen-memory-toggle:hover { color: var(--lb-accent-deep); }
.livsbogen-memory-toggle:focus-visible {
	outline: 2px solid var(--lb-accent);
	outline-offset: 3px;
	border-radius: 2px;
}
/* Toggle text swapping. We keep both spans in DOM and toggle via class. */
.livsbogen-memory-toggle-less { display: none; }
.livsbogen-memory-card.is-expanded .livsbogen-memory-toggle-more { display: none; }
.livsbogen-memory-card.is-expanded .livsbogen-memory-toggle-less { display: inline; }

.livsbogen-memory-owner-actions {
	position: absolute;
	top: 12px;
	right: 12px;
	display: flex;
	gap: 6px;
	opacity: 0;
	transition: opacity 0.15s ease;
}
.livsbogen-memory-card:hover .livsbogen-memory-owner-actions,
.livsbogen-memory-card:focus-within .livsbogen-memory-owner-actions { opacity: 1; }
@media (max-width: 720px) {
	.livsbogen-memory-owner-actions { opacity: 1; }
}
.livsbogen-memory-owner-actions .livsbogen-icon-btn {
	background: rgba(253, 250, 243, 0.92);
	backdrop-filter: blur(4px);
}

/* =========================================================================
   11. Single memory page
   ========================================================================= */

.livsbogen-memory-page-head { margin-bottom: 24px; }

.livsbogen-memory-full {
	background: var(--lb-paper-soft);
	border: 1px solid var(--lb-line-faint);
	border-radius: var(--lb-radius-lg);
	padding: 28px 24px 32px;
	box-shadow: var(--lb-shadow-sm);
}
@media (min-width: 720px) {
	.livsbogen-memory-full { padding: 48px 56px 56px; }
}

.livsbogen-memory-full-header {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 16px;
	align-items: center;
	margin-bottom: 14px;
}

.livsbogen-memory-full-title {
	font-size: clamp(1.8rem, 4vw + 0.6rem, 2.6rem);
	margin-bottom: 0.4em;
}

.livsbogen-memory-full-location {
	font-size: 1rem;
	color: var(--lb-ink-soft);
	margin-bottom: 24px;
}

.livsbogen-memory-full-image {
	margin: 24px 0 32px;
	overflow: hidden;
	border-radius: var(--lb-radius);
}
.livsbogen-memory-full-image img {
	width: 100%;
	height: auto;
	display: block;
}
.livsbogen-image-caption {
	font-size: 0.92rem;
	color: var(--lb-ink-soft);
	font-style: italic;
	text-align: center;
	margin: 10px 0 0;
	padding: 0 12px;
	line-height: 1.5;
}

.livsbogen-memory-full-content {
	font-size: 1.1rem;
	line-height: 1.7;
	color: var(--lb-ink);
	font-family: var(--lb-font-body);
}
.livsbogen-memory-full-content p { margin: 0 0 1.2em; }
.livsbogen-memory-full-content p:last-child { margin-bottom: 0; }

.livsbogen-memory-full-people {
	margin-top: 32px;
	padding-top: 24px;
	border-top: 1px solid var(--lb-line-faint);
}
.livsbogen-memory-full-people ul {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.livsbogen-memory-full-people li {
	background: var(--lb-paper);
	border: 1px solid var(--lb-line-faint);
	padding: 6px 14px;
	border-radius: 999px;
	font-size: 0.92rem;
	color: var(--lb-ink-soft);
}

.livsbogen-memory-full-footer {
	margin-top: 32px;
	padding-top: 24px;
	border-top: 1px solid var(--lb-line-faint);
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
	font-size: 0.95rem;
	color: var(--lb-ink-soft);
}
.livsbogen-memory-full-footer p { margin: 0; }

/* =========================================================================
   11.5. Privacy card (dashboard) and private banner (profile)
   ========================================================================= */

.livsbogen-privacy-card {
	background: var(--lb-paper-soft);
	border: 1px solid var(--lb-line-faint);
	border-left: 4px solid var(--lb-ink-soft);
}
.livsbogen-privacy-card[data-state="unlisted"] {
	border-left-color: var(--lb-c-steder);
}

.livsbogen-privacy-head {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	margin-bottom: 18px;
}

.livsbogen-privacy-icon {
	flex-shrink: 0;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: var(--lb-paper-deep);
	color: var(--lb-ink);
	display: flex;
	align-items: center;
	justify-content: center;
}
.livsbogen-privacy-icon svg { width: 18px; height: 18px; }
.livsbogen-privacy-icon-unlocked {
	background: rgba(107, 128, 104, 0.12);
	color: var(--lb-c-steder);
}

.livsbogen-privacy-title {
	font-family: var(--lb-font-display);
	font-size: 1.2rem;
	font-weight: 500;
	margin: 0 0 4px;
	color: var(--lb-ink);
}

.livsbogen-privacy-text {
	font-size: 0.98rem;
	color: var(--lb-ink-soft);
	margin: 0;
	line-height: 1.5;
}

.livsbogen-privacy-link {
	display: flex;
	gap: 8px;
	margin-bottom: 14px;
	align-items: stretch;
}
.livsbogen-privacy-link input[type="text"] {
	flex: 1;
	min-width: 0;
	font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
	font-size: 0.92rem;
	background: #fff !important;
	color: var(--lb-ink-soft);
}
.livsbogen-privacy-link input[type="text"]:focus {
	color: var(--lb-ink);
}
.livsbogen-privacy-link .livsbogen-btn-ghost {
	white-space: nowrap;
	padding: 10px 16px;
	font-size: 0.92rem;
}

.livsbogen-privacy-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: center;
}

.livsbogen-privacy-status {
	margin-top: 12px;
	padding: 10px 14px;
	border-radius: var(--lb-radius);
	font-size: 0.92rem;
	background: var(--lb-paper-deep);
	color: var(--lb-ink-soft);
}
.livsbogen-privacy-status-err { background: #f2dcd6; color: var(--lb-accent-deep); }

/* Avatar card on dashboard */
.livsbogen-section-title-sm {
	font-family: var(--lb-font-display);
	font-size: 1.15rem;
	font-weight: 500;
	margin: 0 0 14px;
	color: var(--lb-ink);
}
.livsbogen-avatar-card {
	margin-bottom: 24px;
}
.livsbogen-avatar-card-inner {
	display: flex;
	gap: 24px;
	align-items: center;
	flex-wrap: wrap;
}
.livsbogen-avatar-preview {
	flex-shrink: 0;
	width: 96px;
	height: 96px;
	border-radius: 50%;
	overflow: hidden;
	background: var(--lb-paper-deep);
	display: flex;
	align-items: center;
	justify-content: center;
	border: 2px solid var(--lb-line);
}
.livsbogen-avatar-preview img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.livsbogen-avatar-preview .livsbogen-avatar-initials {
	font-family: var(--lb-font-display);
	font-size: 1.6rem;
	font-weight: 500;
	color: var(--lb-accent);
	letter-spacing: 0.02em;
}
.livsbogen-avatar-actions {
	flex: 1;
	min-width: 200px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	align-items: flex-start;
}
.livsbogen-avatar-hint {
	margin: 0 0 4px;
	font-size: 0.92rem;
	color: var(--lb-ink-soft);
}
.livsbogen-avatar-hint-locked {
	font-style: italic;
}
.livsbogen-avatar-status {
	margin-top: 12px;
	padding: 10px 14px;
	border-radius: var(--lb-radius);
	font-size: 0.92rem;
}
.livsbogen-avatar-status.is-ok { background: var(--lb-paper-deep); color: var(--lb-ink-soft); }
.livsbogen-avatar-status.is-error { background: #f2dcd6; color: var(--lb-accent-deep); }

/* Private banner on profile page */
.livsbogen-profile-private-banner {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	max-width: 60ch;
	margin: 0 auto 16px;
	padding: 10px 16px;
	background: var(--lb-paper-soft);
	border: 1px solid var(--lb-line);
	border-radius: var(--lb-radius);
	color: var(--lb-ink-soft);
	font-size: 0.92rem;
	text-align: left;
}
.livsbogen-profile-private-banner svg {
	flex-shrink: 0;
	color: var(--lb-ink);
}

/* =========================================================================
   11.7. Prompts index page (/spoergsmaal)
   ========================================================================= */

.livsbogen-prompts-page .livsbogen-container-narrow {
	max-width: 760px;
}

.livsbogen-prompts-head {
	text-align: center;
	padding: 32px 0 40px;
	margin-bottom: 32px;
	border-bottom: 1px solid var(--lb-line-faint);
}
.livsbogen-prompts-head .livsbogen-display {
	font-size: clamp(1.8rem, 3vw + 0.8rem, 2.8rem);
	max-width: 22ch;
	margin: 0 auto 16px;
}

.livsbogen-prompts-lead {
	max-width: 56ch;
	margin: 0 auto 28px;
	color: var(--lb-ink-soft);
	font-size: 1.05rem;
	line-height: 1.6;
}

.livsbogen-prompts-toc {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px 14px;
	margin-top: 24px;
}
.livsbogen-prompts-toc a {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 6px 12px;
	border-radius: 999px;
	background: var(--lb-paper-soft);
	border: 1px solid var(--lb-line-faint);
	color: var(--lb-ink);
	text-decoration: none;
	font-size: 0.92rem;
	transition: all 0.15s ease;
}
.livsbogen-prompts-toc a:hover {
	background: var(--lb-paper-deep);
	border-color: var(--lb-line);
	text-decoration: none;
}
.livsbogen-prompts-toc-count {
	color: var(--lb-ink-faint);
	font-variant-numeric: tabular-nums;
}

.livsbogen-prompts-section {
	margin: 56px 0;
	scroll-margin-top: 24px;
}

.livsbogen-prompts-section-head {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-bottom: 24px;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--lb-line-faint);
}
.livsbogen-prompts-section-icon {
	flex-shrink: 0;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--lb-paper-soft);
	border: 1px solid var(--lb-line-faint);
}
.livsbogen-prompts-section-icon svg { width: 22px; height: 22px; }

.livsbogen-prompts-section-head[data-chapter="steder"] .livsbogen-prompts-section-icon       { color: var(--lb-c-steder); }
.livsbogen-prompts-section-head[data-chapter="koncerter"] .livsbogen-prompts-section-icon    { color: var(--lb-c-koncerter); }
.livsbogen-prompts-section-head[data-chapter="venner"] .livsbogen-prompts-section-icon       { color: var(--lb-c-venner); }
.livsbogen-prompts-section-head[data-chapter="kaerlighed"] .livsbogen-prompts-section-icon   { color: var(--lb-c-kaerlighed); }
.livsbogen-prompts-section-head[data-chapter="boern"] .livsbogen-prompts-section-icon        { color: var(--lb-c-boern); }
.livsbogen-prompts-section-head[data-chapter="rejser"] .livsbogen-prompts-section-icon       { color: var(--lb-c-rejser, #4e7da3); }
.livsbogen-prompts-section-head[data-chapter="begivenheder"] .livsbogen-prompts-section-icon { color: var(--lb-c-begivenheder); }

.livsbogen-prompts-section-title {
	flex: 1;
	font-family: var(--lb-font-display);
	font-size: 1.6rem;
	font-weight: 500;
	margin: 0;
}

.livsbogen-prompts-section-count {
	color: var(--lb-ink-faint);
	font-size: 0.88rem;
	font-variant-numeric: tabular-nums;
}

.livsbogen-prompts-list {
	list-style: none;
	padding: 0;
	margin: 0;
	counter-reset: prompt-counter;
}
.livsbogen-prompts-list-item {
	counter-increment: prompt-counter;
	padding: 18px 0 18px 44px;
	position: relative;
	border-bottom: 1px solid var(--lb-line-faint);
}
.livsbogen-prompts-list-item:last-child {
	border-bottom: none;
}
.livsbogen-prompts-list-item::before {
	content: counter(prompt-counter);
	position: absolute;
	left: 0;
	top: 18px;
	font-family: var(--lb-font-display);
	font-size: 1.1rem;
	color: var(--lb-ink-faint);
	font-variant-numeric: tabular-nums;
	width: 32px;
	text-align: right;
}
.livsbogen-prompts-question {
	margin: 0;
	font-family: var(--lb-font-display);
	font-size: 1.18rem;
	line-height: 1.4;
	color: var(--lb-ink);
	font-weight: 400;
}
.livsbogen-prompts-hint {
	margin: 6px 0 0;
	color: var(--lb-ink-soft);
	font-size: 0.95rem;
	font-style: italic;
}

.livsbogen-prompts-cta {
	margin: 80px 0 40px;
	padding: 48px 32px;
	text-align: center;
	background: var(--lb-paper-soft);
	border: 1px solid var(--lb-line-faint);
	border-radius: 14px;
}
.livsbogen-prompts-cta .livsbogen-display-md {
	margin: 0 0 16px;
}
.livsbogen-prompts-cta p {
	max-width: 50ch;
	margin: 0 auto 24px;
	color: var(--lb-ink-soft);
	line-height: 1.6;
}
.livsbogen-prompts-cta-actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
	margin-bottom: 16px;
}
.livsbogen-prompts-cta-note {
	font-size: 0.88rem;
	color: var(--lb-ink-faint);
	font-style: italic;
	margin: 0;
}

/* =========================================================================
   12. Empty state
   ========================================================================= */

.livsbogen-empty {
	text-align: center;
	padding: 48px 20px;
	max-width: 480px;
	margin: 0 auto;
}
.livsbogen-empty h1, .livsbogen-empty h2 {
	font-family: var(--lb-font-display);
	margin-bottom: 0.4em;
}
.livsbogen-empty p {
	color: var(--lb-ink-soft);
	font-size: 1.05rem;
	margin-bottom: 1.4em;
}

/* =========================================================================
   13. Misc
   ========================================================================= */

[hidden] { display: none !important; }

::selection { background: var(--lb-accent); color: #fdfaf3; }

/* Email verification banner on dashboard */
.livsbogen-verify-bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 18px;
	padding: 16px 20px;
	margin-bottom: 24px;
	background: #fdf6e6;
	border: 1px solid #d9c590;
	border-radius: var(--lb-radius);
}
.livsbogen-verify-bar-text {
	flex: 1;
	min-width: 240px;
	font-size: 0.95rem;
	color: var(--lb-ink);
}
.livsbogen-verify-bar-text strong {
	display: block;
	font-family: var(--lb-font-display);
	font-size: 1.05rem;
	margin-bottom: 4px;
}
.livsbogen-verify-bar-text span {
	color: var(--lb-ink-soft);
	line-height: 1.5;
}
.livsbogen-verify-bar-actions {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 6px;
}
.livsbogen-verify-bar-status {
	font-size: 0.85rem;
	color: var(--lb-ink-soft);
}
.livsbogen-privacy-hint {
	font-size: 0.85rem;
	color: var(--lb-ink-soft);
	margin: 8px 0 0;
	font-style: italic;
}

/* Verify-email result page */
.livsbogen-verify-page {
	padding-top: 64px;
	padding-bottom: 64px;
}
.livsbogen-verify-card {
	text-align: center;
	padding: 48px 32px;
	background: var(--lb-paper-soft);
	border: 1px solid var(--lb-line);
	border-radius: var(--lb-radius);
}
.livsbogen-verify-icon {
	display: inline-flex;
	margin-bottom: 16px;
}
.livsbogen-verify-success .livsbogen-verify-icon { color: #5d7a4f; }
.livsbogen-verify-error .livsbogen-verify-icon { color: #8e2e1c; }
.livsbogen-verify-card h1 {
	margin: 0 0 12px;
}
.livsbogen-verify-card p.livsbogen-lead {
	max-width: 520px;
	margin: 0 auto 28px;
}
.livsbogen-verify-actions {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
}
.livsbogen-verify-actions .livsbogen-hint {
	color: var(--lb-ink-soft);
	font-size: 0.9rem;
	margin: 0;
}

/* Prompt card actions: primary CTA + skip-to-free-form link */
.livsbogen-prompt-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px;
	margin-top: 16px;
}

/* Authentication pages: forgot-password, reset-password.
   Layout matches the existing /login and /opret styling so the whole
   auth flow feels like one experience. */
.livsbogen-auth-page {
	padding-top: 64px;
	padding-bottom: 80px;
}
.livsbogen-auth-header {
	text-align: center;
	margin-bottom: 32px;
}
.livsbogen-auth-header h1 {
	margin: 0 0 12px;
}
.livsbogen-auth-header p.livsbogen-lead {
	color: var(--lb-ink-soft);
	max-width: 480px;
	margin: 0 auto;
}
.livsbogen-auth-success,
.livsbogen-auth-error {
	text-align: center;
	padding: 48px 24px;
}
.livsbogen-auth-success .livsbogen-verify-icon { color: #5d7a4f; margin-bottom: 16px; display: inline-flex; }
.livsbogen-auth-error   .livsbogen-verify-icon { color: #8e2e1c; margin-bottom: 16px; display: inline-flex; }
.livsbogen-auth-success p.livsbogen-lead,
.livsbogen-auth-error p.livsbogen-lead {
	max-width: 520px;
	margin: 0 auto 28px;
}

/* Reuse the same hint style as elsewhere */
.livsbogen-field-hint {
	font-size: 0.85rem;
	color: var(--lb-ink-soft);
	margin: 6px 0 0;
}

/* Demo banner: shown above the cover on profiles flagged as demo data.
   Sits in normal flow (not floating) so it pushes the rest of the page
   down rather than overlapping the cover image. Visually distinct from
   the rest of the page so visitors immediately register "this isn't a
   real person's livsbog". */
.livsbogen-demo-banner {
	background: #2f5b6e;
	color: #fdfaf3;
	padding: 14px 0;
	font-size: 0.95rem;
	border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.livsbogen-demo-banner .livsbogen-container {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	max-width: 880px;
	margin: 0 auto;
	padding: 0 20px;
}
.livsbogen-demo-banner-icon {
	flex-shrink: 0;
	display: inline-flex;
	margin-top: 2px;
	color: #fdfaf3;
}
.livsbogen-demo-banner strong { font-weight: 600; }
.livsbogen-page .livsbogen-demo-banner a,
.livsbogen-demo-banner a:not([class]) {
	color: #fdfaf3;
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
	border-bottom: none;
	font-weight: 600;
}
.livsbogen-page .livsbogen-demo-banner a:hover,
.livsbogen-demo-banner a:not([class]):hover {
	color: #fdfaf3;
	text-decoration-thickness: 2px;
}

/* =========================================================================
   Music list — public profile section + /musik manager
   ========================================================================= */

/* ---- Public profile: list of important songs ---- */

.livsbogen-music-section {
	margin: 32px 0 40px;
	padding: 24px 24px 8px;
	background: var(--lb-paper-soft);
	border: 1px solid var(--lb-line-faint);
	border-left: 4px solid var(--lb-accent);
	border-radius: var(--lb-radius-lg);
}
.livsbogen-music-section .livsbogen-music-empty {
	margin: 0 0 12px;
}

.livsbogen-music-section-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 20px;
	flex-wrap: wrap;
}

.livsbogen-music-section-head h2 { margin: 0; }

.livsbogen-music-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.livsbogen-music-item {
	padding: 18px 20px;
	background: var(--lb-paper-soft);
	border: 1px solid var(--lb-line);
	border-radius: 10px;
}

.livsbogen-music-item-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 6px 12px;
}

.livsbogen-music-title {
	font-weight: 600;
	font-size: 1.05rem;
	color: var(--lb-ink);
}

.livsbogen-music-artist {
	color: var(--lb-ink-soft);
	font-size: 0.95rem;
}

.livsbogen-music-artist::before {
	content: "·";
	margin-right: 6px;
	color: var(--lb-line);
}

.livsbogen-music-note {
	margin: 8px 0 14px;
	color: var(--lb-ink-soft);
	font-style: italic;
	font-size: 0.95rem;
	line-height: 1.5;
}

.livsbogen-music-player {
	display: flex;
	align-items: center;
	gap: 14px;
	flex-wrap: wrap;
}

.livsbogen-music-play {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.livsbogen-music-external {
	font-size: 0.88rem;
	color: var(--lb-ink-soft);
	border-bottom: 1px dotted var(--lb-line);
}
.livsbogen-music-external:hover { color: var(--lb-accent); border-bottom-color: var(--lb-accent); }

.livsbogen-music-embed {
	margin-top: 16px;
	width: 100%;
}
.livsbogen-music-embed iframe {
	width: 100%;
	aspect-ratio: 16 / 9;
	border: 0;
	border-radius: 8px;
}
.livsbogen-music-empty {
	color: var(--lb-ink-soft);
	font-style: italic;
}

/* ---- Dashboard CTA card linking to /musik ---- */

.livsbogen-card-music {
	display: flex;
	align-items: flex-start;
	gap: 24px;
	flex-wrap: wrap;
}
.livsbogen-card-music-text { flex: 1 1 320px; }
.livsbogen-card-music-text h2 { margin: 4px 0 8px; }
.livsbogen-card-music-hint {
	color: var(--lb-ink-soft);
	margin: 0;
}
.livsbogen-card-music-actions {
	flex: 0 0 auto;
	padding-top: 4px;
}
.livsbogen-card-music-preview {
	list-style: none;
	margin: 12px 0 0;
	padding: 0;
	font-size: 0.95rem;
	color: var(--lb-ink-soft);
}
.livsbogen-card-music-preview li {
	padding: 3px 0;
	border-bottom: 1px dotted var(--lb-line-faint);
}
.livsbogen-card-music-preview li:last-child {
	border-bottom: none;
}
.livsbogen-card-music-preview-title {
	color: var(--lb-ink);
	font-weight: 500;
}
.livsbogen-card-music-preview-more {
	color: var(--lb-ink-soft);
	font-style: italic;
}

/* ---- /musik manager ---- */

.livsbogen-music-manager {
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.livsbogen-music-rows {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.livsbogen-music-row {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 16px 18px;
	border: 1px solid var(--lb-line);
	border-radius: 10px;
	background: var(--lb-paper-soft);
}

.livsbogen-music-row-fields {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
}

.livsbogen-music-row-fields label {
	display: flex;
	flex-direction: column;
	gap: 4px;
	font-size: 0.92rem;
	margin: 0;
}
.livsbogen-music-row-fields .livsbogen-music-url-label,
.livsbogen-music-row-fields .livsbogen-music-note-label {
	grid-column: 1 / -1;
}

.livsbogen-music-label {
	font-weight: 500;
	color: var(--lb-ink-soft);
	font-size: 0.88rem;
}

.livsbogen-music-optional {
	font-weight: 400;
	color: var(--lb-ink-soft);
	font-size: 0.82rem;
}

.livsbogen-music-row input,
.livsbogen-music-row textarea {
	width: 100%;
	font: inherit;
	font-size: 0.96rem;
	padding: 8px 10px;
	border: 1px solid var(--lb-line);
	border-radius: 6px;
	background: #fff;
	color: var(--lb-ink);
}
.livsbogen-music-row textarea {
	resize: vertical;
	min-height: 56px;
}

.livsbogen-music-search-helpers {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 6px 12px;
	margin-top: 6px;
	font-size: 0.85rem;
}
.livsbogen-music-search-hint {
	color: var(--lb-ink-soft);
}
.livsbogen-music-search-helpers .livsbogen-btn-link {
	font-size: 0.85rem;
}

/* In-page YouTube search: results panel below the URL field. */
.livsbogen-music-search-panel {
	margin-top: 10px;
	padding: 12px;
	border: 1px solid var(--lb-line);
	border-radius: var(--lb-radius);
	background: var(--lb-paper-soft);
}
.livsbogen-music-search-msg {
	margin: 0 0 8px;
	font-size: 0.95rem;
	color: var(--lb-ink-soft);
}
.livsbogen-music-search-panel .livsbogen-music-search-msg:last-child {
	margin-bottom: 0;
}
.livsbogen-music-result {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	min-height: 56px;
	margin-top: 8px;
	padding: 8px 10px;
	border: 1px solid var(--lb-line);
	border-radius: var(--lb-radius);
	background: var(--lb-paper);
	font-family: inherit;
	font-size: 0.95rem;
	text-align: left;
	cursor: pointer;
}
.livsbogen-music-result:hover,
.livsbogen-music-result:focus-visible {
	border-color: var(--lb-accent);
	outline: none;
	background: var(--lb-paper-deep);
}
.livsbogen-music-result img {
	flex: 0 0 auto;
	width: 80px;
	height: 60px;
	object-fit: cover;
	border-radius: 6px;
}
.livsbogen-music-result-text {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}
.livsbogen-music-result-text strong {
	color: var(--lb-ink);
	font-weight: 500;
}
.livsbogen-music-result-text span {
	color: var(--lb-ink-soft);
	font-size: 0.85rem;
}
.livsbogen-music-search-close {
	display: block;
	margin-top: 10px;
	font-size: 0.85rem;
}

/* Copy/paste guide shown when in-page search is not configured. */
.livsbogen-music-help {
	margin-top: 14px;
	max-width: 640px;
	border: 1px solid var(--lb-line);
	border-radius: var(--lb-radius);
	background: var(--lb-paper-soft);
	padding: 10px 14px;
}
.livsbogen-music-help summary {
	cursor: pointer;
	font-weight: 500;
	color: var(--lb-ink);
}
.livsbogen-music-help ol {
	margin: 12px 0 8px;
	padding-left: 22px;
	line-height: 1.7;
}
.livsbogen-music-help li {
	margin-bottom: 6px;
}
.livsbogen-music-help p {
	margin: 8px 0 4px;
	color: var(--lb-ink-soft);
	font-size: 0.95rem;
}

.livsbogen-music-row-actions {
	display: flex;
	gap: 8px;
	align-items: center;
	justify-content: space-between;
	padding-top: 4px;
	border-top: 1px dashed var(--lb-line-faint);
	margin-top: 4px;
}
.livsbogen-music-row-action-icons {
	display: flex;
	gap: 8px;
}

/* Read-only summary shown for saved songs (edit/delete via the icons). */
.livsbogen-music-row-view {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;
}
.livsbogen-music-row-view-main {
	min-width: 0;
}
.livsbogen-music-row-view-heading {
	margin: 0;
	font-size: 1rem;
	line-height: 1.4;
}
.livsbogen-music-row-view-title {
	font-weight: 600;
	color: var(--lb-ink);
}
.livsbogen-music-row-view-artist {
	color: var(--lb-ink-soft);
}
.livsbogen-music-row-view-artist::before {
	content: " – ";
}
.livsbogen-music-row-view-note {
	margin: 4px 0 0;
	color: var(--lb-ink-soft);
	font-style: italic;
	font-size: 0.92rem;
	line-height: 1.4;
}
.livsbogen-music-row-view-link {
	display: inline-block;
	margin-top: 6px;
	font-size: 0.85rem;
	color: var(--lb-accent);
	text-decoration: none;
}
.livsbogen-music-row-view-link:hover {
	text-decoration: underline;
}
.livsbogen-music-row-view-status {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin: 6px 0 0;
}
.livsbogen-music-row-view-status .livsbogen-music-row-view-link {
	margin-top: 0;
}
.livsbogen-music-badge {
	display: inline-block;
	padding: 2px 8px;
	border-radius: 999px;
	font-size: 0.78rem;
	font-weight: 600;
	line-height: 1.5;
}
.livsbogen-music-badge-ok {
	color: #2e6b3e;
	background: #e8f3ea;
}
.livsbogen-music-badge-missing {
	color: #8a5a1f;
	background: #f7edda;
}
.livsbogen-music-find-link {
	font-size: 0.85rem;
}

/* Dashboard banner while a gift handover is pending. */
.livsbogen-card-gift {
	border-left: 4px solid var(--lb-accent);
}

/* Gift handover (/overdragelse): printable gavekort. */
.livsbogen-giftcard-inner {
	max-width: 460px;
	margin: 0 auto;
	padding: 28px 24px;
	border: 2px solid var(--lb-accent);
	border-radius: 12px;
	text-align: center;
}
.livsbogen-giftcard-brand {
	margin: 0 0 4px;
	font-size: 0.8rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--lb-ink-soft);
}
.livsbogen-giftcard-title {
	margin: 0 0 12px;
	font-size: 1.5rem;
}
.livsbogen-giftcard-text {
	margin: 0 0 20px;
	color: var(--lb-ink-soft);
	line-height: 1.5;
}
.livsbogen-giftcard-details {
	margin: 0 0 16px;
	text-align: left;
}
.livsbogen-giftcard-details dt {
	margin-top: 10px;
	font-size: 0.8rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--lb-ink-soft);
}
.livsbogen-giftcard-details dd {
	margin: 2px 0 0;
	font-weight: 600;
	word-break: break-all;
}
.livsbogen-giftcard-password {
	min-height: 1.6em;
	border-bottom: 1px dotted var(--lb-ink-soft);
}
.livsbogen-giftcard-foot {
	margin: 0;
	font-size: 0.85rem;
	color: var(--lb-ink-soft);
}
.livsbogen-handover-steps {
	margin: 0 0 16px;
	padding-left: 22px;
	line-height: 1.6;
}
.livsbogen-handover-steps li {
	margin-bottom: 8px;
}
.livsbogen-handover-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 16px;
}
.livsbogen-handover-done {
	border-top: 1px solid var(--lb-line, #ddd);
	padding-top: 14px;
}
@media print {
	/* Only the gavekort goes on paper. */
	.lb-site-header,
	.lb-site-footer,
	.lb-skip-link,
	.livsbogen-handover-page .livsbogen-no-print {
		display: none !important;
	}
	.livsbogen-handover-page .livsbogen-card {
		border: none;
		box-shadow: none;
		padding: 0;
	}
}

/* "Hvem er livsbogen til?" choice on /opret (self vs. gift). */
.livsbogen-bookfor-pick {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
}
@media (max-width: 600px) {
	.livsbogen-bookfor-pick {
		grid-template-columns: 1fr;
	}
}
.livsbogen-bookfor-item {
	display: grid;
	grid-template-columns: auto 1fr;
	column-gap: 10px;
	row-gap: 2px;
	align-items: center;
	padding: 12px 14px;
	border: 1px solid var(--lb-line, #ddd);
	border-radius: var(--lb-radius, 8px);
	cursor: pointer;
}
/* Progressive enhancement — browsers without :has() still show the
   native radio, so the selection is never invisible. */
.livsbogen-bookfor-item:has(input:checked) {
	border-color: var(--lb-accent);
	box-shadow: 0 0 0 1px var(--lb-accent);
}
.livsbogen-bookfor-item input {
	grid-row: 1 / span 2;
	margin: 0;
}
.livsbogen-bookfor-title {
	font-weight: 600;
	color: var(--lb-ink);
}
.livsbogen-bookfor-desc {
	grid-column: 2;
}
.livsbogen-bookfor-desc {
	font-size: 0.85rem;
	color: var(--lb-ink-soft);
}

/* Optional song on the concert memory form. */
.livsbogen-song-inputs {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
}
@media (max-width: 600px) {
	.livsbogen-song-inputs {
		grid-template-columns: 1fr;
	}
}
.livsbogen-music-row-view-actions {
	display: flex;
	flex: 0 0 auto;
	gap: 8px;
}

/* Mode switch: view hides the editor, edit hides the summary. */
.livsbogen-music-row[data-mode="view"] .livsbogen-music-row-fields,
.livsbogen-music-row[data-mode="view"] .livsbogen-music-row-actions {
	display: none;
}
.livsbogen-music-row[data-mode="edit"] .livsbogen-music-row-view {
	display: none;
}

.livsbogen-icon-btn-danger:hover {
	color: #b03a2e;
	border-color: #b03a2e;
}

.livsbogen-music-manager-actions {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
	margin-top: 4px;
}

@media (max-width: 600px) {
	.livsbogen-music-row-fields {
		grid-template-columns: 1fr;
	}
}