/* ========================================================================
   Charlier Family Archive — visual layer
   ======================================================================== */

:root {
	--cream-bg:        rgb(232,222,200);
	--frame-bg:        url(back.jpg);
	--sidebar-bg:      #EEE7D7;
	--card-bg:         rgb(252,247,232);
	--card-border:     rgb(214,200,170);
	--ink:             rgb(54,40,26);
	--ink-muted:       rgb(112,96,72);
	--ink-faint:       rgb(170,150,120);
	--accent:          rgb(155,118,76);
	--accent-strong:   rgb(110,80,52);
	--cta-bg:          rgb(72,54,36);
	--cta-text:        rgb(248,242,228);
	--border-soft:     rgb(214,202,176);
	--border-line:     rgb(95,88,78);
}

body {
	font-family: 'Inter', Tahoma, sans-serif;
	color: var(--ink);
	font-size: 13px;
	line-height: 1.5;
	background: var(--cream-bg);
	margin: 0;
	-webkit-font-smoothing: antialiased;
}

a:link, a:visited {
	color: var(--ink);
	text-decoration: none;
}
a:hover {
	color: var(--accent-strong);
}

/* Frame & layout ===================================================== */
div.ida-frame {
	width: 1500px;
	margin: 0 auto;
	background: rgb(241,234,217);
	border-left: 1px solid var(--card-border);
	border-right: 1px solid var(--card-border);
	min-height: 100vh;
}
div.ida-layout {
	display: grid;
	grid-template-columns: 240px 1fr;
}

/* Sidebar ============================================================ */
aside.ida-sidebar {
	background: var(--sidebar-bg);
	border-right: 1px solid var(--border-soft);
	padding: 28px 22px;
	display: flex;
	flex-direction: column;
	min-height: calc(100vh - 0px);
}
div.ida-sidebar-header { margin-bottom: 26px; }
a.ida-home-link, a.ida-home-link:visited {
	display: block;
	text-decoration: none;
	color: inherit;
}
a.ida-home-link:hover { color: inherit; }
h1.ida-title {
	margin: 0 0 14px 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	text-align: center;
}
span.ida-title-main {
	font-family: 'Playfair Display', Georgia, serif;
	font-weight: 700;
	font-size: 34px;
	line-height: 1;
	letter-spacing: 0.04em;
	color: var(--ink);
	text-transform: uppercase;
}
span.ida-title-sub {
	font-family: 'Inter', Tahoma, sans-serif;
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.22em;
	color: var(--accent);
	text-transform: uppercase;
}
img.ida-tagline-divider {
	display: block;
	width: 144px;
	height: auto;
	margin: 4px auto 14px;
}
img.ida-portrait {
	display: block;
	width: 55%;
	max-width: 120px;
	height: auto;
	margin: 6px auto 4px;
	border-radius: 8px;
}
p.ida-tagline {
	font-style: italic;
	font-size: 12px;
	color: var(--ink-muted);
	margin: 0;
	line-height: 1.55;
}

nav.ida-nav { flex: 1; }
h2.ida-nav-section {
	font-family: 'Inter', Tahoma, sans-serif;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--accent);
	margin: 24px 0 8px 0;
	padding: 0;
}
nav.ida-nav > h2.ida-nav-section:first-child {
	margin-top: 8px;
}
a.ida-nav-item {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 7px 10px;
	margin: 0 -10px;
	border-radius: 6px;
	color: var(--ink);
	font-size: 13px;
	font-weight: 400;
	border-left: 3px solid transparent;
}
a.ida-nav-item:link, a.ida-nav-item:visited { color: var(--ink); }
a.ida-nav-item:hover {
	background: rgba(155,118,76,0.10);
	color: var(--ink);
}
a.ida-nav-item.active {
	background: rgba(155,118,76,0.16);
	border-left-color: var(--accent);
	color: var(--accent-strong);
	font-weight: 500;
}
a.ida-nav-item.context-confirm {
	background: rgba(200,60,60,0.12);
	border-left-color: rgb(200,60,60);
	color: rgb(180,40,40);
	font-weight: 600;
}
a.ida-nav-item svg {
	flex-shrink: 0;
	width: 16px;
	height: 16px;
	stroke: currentColor;
}

footer.ida-sidebar-footer {
	margin-top: 30px;
	text-align: center;
}
footer.ida-sidebar-footer img {
	display: block;
	margin: 0 auto;
	max-width: 100%;
	height: auto;
}

/* Main area ========================================================== */
main.ida-main {
	padding: 22px 28px 40px;
	min-width: 0; /* allow shrink */
}
header.ida-main-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	margin-bottom: 22px;
	min-height: 44px;
}
div.ida-main-actions { flex: 1; min-width: 0; }

div.ida-user-chip {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 4px 12px 4px 4px;
	background: var(--card-bg);
	border: 1px solid var(--card-border);
	border-radius: 999px;
	font-size: 13px;
	color: var(--ink);
}
div.ida-user-chip img {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	object-fit: cover;
	border: 1px solid var(--card-border);
}
div.ida-user-chip a { color: var(--ink); }
div.ida-user-chip .logout-link {
	font-size: 11px;
	color: var(--ink-faint);
	margin-left: 4px;
}
div.ida-user-chip .logout-link:hover { color: var(--accent-strong); }

div.ida-sign-in {
	font-size: 12px;
	color: var(--ink-muted);
}

footer.ida-footer {
	max-width: 1200px;
	margin: 0 auto;
	padding: 18px 28px;
	font-size: 11px;
	color: var(--ink-muted);
	text-align: center;
	background: var(--sidebar-bg);
	border-top: 1px solid var(--border-soft);
}

/* Headings ============================================================ */
h1, h2, h3, h4 {
	font-family: 'Playfair Display', Georgia, serif;
	color: var(--ink);
	margin: 0 0 12px 0;
}

/* Card panels (wrap existing tables/tabs visually) ==================== */
div.message {
	font-family: 'Inter', Tahoma, sans-serif;
	font-size: 14px;
	font-weight: 400;
}

/* Splash layout ======================================================= */
div.splash-top {
	display: grid;
	grid-template-columns: 1fr 300px;
	gap: 24px;
	align-items: stretch;
	margin: 0 0 28px 0;
}
div.splash-bottom { display: flex; flex-direction: column; gap: 28px; }
div.splash-rail { display: flex; flex-direction: column; gap: 18px; }
div.splash-rail div.dropzone { margin: 0; }
div.splash-main-top { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
div.splash-main-top div.dropzone { margin: 0; }
div.splash-main-top section.hero { flex: 1; }

/* Hero — Family Story of the Month =================================== */
section.hero {
	background-image: url(../images/Main.png);
	background-repeat: no-repeat;
	background-position: right top;
	background-size: cover;
	border-radius: 14px;
	overflow: hidden;
	min-height: 400px;
	position: relative;
}
div.hero-text {
	padding: 36px 28px 36px 32px;
	max-width: 50%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	height: 100%;
	position: relative;
	z-index: 1;
}
div.hero-eyebrow {
	font-family: 'Inter', Tahoma, sans-serif;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.18em;
	color: var(--accent);
	text-transform: uppercase;
	margin-bottom: 18px;
}
h1.hero-title {
	font-family: 'Playfair Display', Georgia, serif;
	font-size: 32px;
	line-height: 1.15;
	font-weight: 600;
	color: var(--ink);
	margin: 0 0 22px 0;
}
div.hero-today {
	font-family: 'Inter', Tahoma, sans-serif;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--accent);
	margin-bottom: 18px;
}
div.hero-blurb {
	margin-bottom: 16px;
}
div.hero-blurb:last-child { margin-bottom: 0; }
div.hero-blurb-header {
	font-family: 'Inter', Tahoma, sans-serif;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--ink-muted);
	margin-bottom: 6px;
}
ul.hero-blurb-list {
	margin: 0;
	padding-left: 18px;
	font-size: 13px;
	line-height: 1.45;
	color: var(--ink);
}
ul.hero-blurb-list li {
	margin-bottom: 4px;
}
ul.hero-blurb-list a {
	color: var(--accent-strong);
	font-weight: 500;
}
ul.hero-blurb-list a:hover {
	text-decoration: underline;
}
img.hero-divider {
	display: block;
	width: 120px;
	height: auto;
	margin: 0 0 18px 0;
}
p.hero-lede {
	font-size: 13px;
	line-height: 1.55;
	color: var(--ink-muted);
	margin: 0 0 24px 0;
}
a.hero-cta {
	display: inline-block;
	align-self: flex-start;
	padding: 12px 22px;
	background: var(--cta-bg);
	color: var(--cta-text);
	border-radius: 6px;
	font-weight: 500;
	font-size: 13px;
	text-decoration: none;
	transition: background 0.15s;
}
a.hero-cta:hover { background: var(--accent-strong); color: var(--cta-text); }

/* Archive sections (Message Board, Stories) ========================== */
section.archive-section {
	background: var(--card-bg);
	border: 1px solid var(--card-border);
	border-radius: 14px;
	padding: 22px 24px;
}
header.archive-section-header {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	margin-bottom: 16px;
	padding-bottom: 14px;
	border-bottom: 1px solid var(--border-soft);
}
header.archive-section-header h2 {
	font-family: 'Inter', Tahoma, sans-serif;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--ink);
	margin: 0;
}
header.archive-section-header a.view-all {
	font-size: 12px;
	font-weight: 500;
	color: var(--ink-muted);
	border-bottom: 1px solid transparent;
}
header.archive-section-header a.view-all:hover {
	color: var(--accent-strong);
	border-bottom-color: var(--accent);
}

/* Recent Photos rail (Splash) — thumb + title + date, vertical list. */
section.recent-photos-panel {
	display: flex;
	flex-direction: column;
	padding: 14px 18px 18px;
}
header.recent-photos-header {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	margin-bottom: 10px;
}
header.recent-photos-header h3.thread-section-header {
	margin: 0;
}
a.recent-photos-viewall {
	font-family: 'Inter', Tahoma, sans-serif;
	font-size: 11px;
	color: var(--ink-muted);
	text-decoration: none;
	border-bottom: 1px solid transparent;
}
a.recent-photos-viewall:hover {
	color: var(--accent-strong);
	border-bottom-color: var(--accent);
}
/* Each row: upload-card-sized thumb on the left (same dimensions as
   the Recent Uploads grid), date on the right. */
a.recent-photo-row {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 10px 0;
	border-top: 1px solid var(--border-soft);
	color: var(--ink);
	text-decoration: none;
}
a.recent-photo-row:first-of-type { border-top: none; padding-top: 0; }
img.recent-photo-thumb {
	width: 160px;
	height: 160px;
	flex-shrink: 0;
	object-fit: cover;
	border-radius: 12px;
	border: 1px solid var(--card-border);
	transition: border-color 0.12s;
}
a.recent-photo-row:hover img.recent-photo-thumb {
	border-color: var(--accent);
}
div.recent-photo-date {
	font-family: 'Inter', Tahoma, sans-serif;
	font-size: 12px;
	color: var(--ink-muted);
}

div.archive-empty {
	padding: 18px 4px;
	color: var(--ink-muted);
	font-size: 13px;
	font-style: italic;
}

/* Message-board style list ============================================ */
div.archive-list {
	display: flex;
	flex-direction: column;
}
a.archive-item,
div.archive-item {
	display: grid;
	grid-template-columns: 44px 1fr auto 56px;
	gap: 16px;
	align-items: center;
	padding: 14px 8px;
	border-bottom: 1px solid var(--border-soft);
	color: var(--ink);
	cursor: pointer;
}
a.archive-item:last-child,
div.archive-item:last-child { border-bottom: none; }
a.archive-item:hover,
div.archive-item:hover { background: rgba(155,118,76,0.06); }

a.archive-avatar-link {
	display: block;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	overflow: hidden;
	border: 1px solid var(--card-border);
}
a.archive-avatar-link:hover { border-color: var(--accent); }
img.archive-avatar {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	border-radius: 0;
}

div.archive-icon {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: white;
}
div.archive-icon svg { width: 18px; height: 18px; }
div.archive-icon-0 { background: rgb(196,154,90); }
div.archive-icon-1 { background: rgb(86,140,142); }
div.archive-icon-2 { background: rgb(174,108,72); }
div.archive-icon-3 { background: rgb(108,138,178); }

div.archive-content { min-width: 0; }
div.archive-title {
	font-family: 'Playfair Display', Georgia, serif;
	font-size: 15px;
	font-weight: 600;
	color: var(--ink);
	margin-bottom: 2px;
}
div.archive-subtitle {
	font-size: 12px;
	color: var(--ink-muted);
	line-height: 1.4;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
}

div.archive-meta {
	text-align: right;
	font-size: 11px;
	color: var(--ink-muted);
}
div.archive-date { font-weight: 500; }
div.archive-author { margin-top: 2px; font-style: italic; }

div.archive-chip {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 4px 10px;
	border-radius: 999px;
	background: var(--sidebar-bg);
	border: 1px solid var(--card-border);
	font-size: 11px;
	color: var(--ink-muted);
}
div.archive-chip svg { stroke: var(--ink-muted); }

/* Pedigree tree — compact font so 31px-tall rows hold their connecting
   PNG images without text wrapping pushing rows taller. Override any
   tr.odd/tr.even cell padding rules that would otherwise bloat the
   5px-wide diagonal cells. */
table.pedigree {
	border-collapse: collapse;
}
table.pedigree tr.odd td,
table.pedigree tr.even td,
table.pedigree tr td {
	padding: 0;
	vertical-align: middle;
}
table.pedigree img {
	display: block;
	border-radius: 0;
}

/* Descendants tree — connector PNGs need to stack from the top of each
   cell so the L-corners align with the vertical runs in the row above
   and below. The original HTML sets valign="top" on the connector
   cells; we honor that here (don't centre cells) and stack images as
   block elements so two 31px imgs form a continuous 62px segment. */
table.descendants {
	border-collapse: collapse;
}
table.descendants tr.odd td,
table.descendants tr.even td,
table.descendants tr td {
	padding: 0;
	vertical-align: top;
}
table.descendants tr {
	height: 62px;
}
table.descendants img {
	display: block;
	border-radius: 0;
}

/* Person tile inside the pedigree (and elsewhere) — Tahoma 10px so the
   tile fits its declared width=130 height=62 with the dates on one
   line. */
table.person-tile {
	font-family: Tahoma, Verdana, sans-serif;
	font-size: 10px;
	line-height: 1.2;
	color: var(--ink);
}
table.person-tile td {
	padding: 1px;
	vertical-align: top;
}
table.person-tile a:link,
table.person-tile a:visited {
	color: var(--ink);
}
/* Round the avatar inside the pedigree / descendants tile. Scoped to
   imgs inside .person-tile so the connector PNGs (diaVer/diaBot/diaPar)
   used by the tree layout aren't affected. */
table.person-tile img {
	border-radius: 6px;
	display: block;
}

/* Thread pages (Message / Anecdote detail) =========================== */
div.thread-page {
	max-width: 760px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	gap: 18px;
}
a.thread-back {
	font-size: 12px;
	color: var(--ink-muted);
	font-weight: 500;
}
a.thread-back:hover { color: var(--accent-strong); }

article.thread-message {
	background: var(--card-bg);
	border: 1px solid var(--card-border);
	border-radius: 12px;
	padding: 20px 24px 22px;
}
article.thread-message-root {
	padding: 26px 28px 28px;
}
h1.thread-subject {
	font-family: 'Playfair Display', Georgia, serif;
	font-size: 28px;
	font-weight: 600;
	color: var(--ink);
	margin: 0 0 16px 0;
	line-height: 1.2;
}
header.thread-byline {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 16px;
	padding-bottom: 14px;
	border-bottom: 1px solid var(--border-soft);
}
img.thread-avatar {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	object-fit: cover;
	border: 1px solid var(--card-border);
	display: block;
}
a.thread-avatar-link {
	display: block;
	flex-shrink: 0;
	border-radius: 50%;
	transition: transform 0.12s;
}
a.thread-avatar-link:hover img { border-color: var(--accent); }
a.thread-avatar-link:hover { transform: scale(1.03); }
div.thread-author a {
	color: var(--ink);
	border-bottom: 1px solid transparent;
}
div.thread-author a:hover {
	color: var(--accent-strong);
	border-bottom-color: var(--accent);
}
div.thread-byline-text { line-height: 1.3; }
div.thread-author {
	font-weight: 500;
	color: var(--ink);
	font-size: 13px;
}
div.thread-date {
	font-size: 11px;
	color: var(--ink-muted);
	font-style: italic;
	margin-top: 2px;
}
/* Subtle "(edited)" mark + clickable "edit" link in the byline date row.
   Inherits italic + muted color from .thread-date but the link gets the
   usual underline-on-hover affordance so it reads as actionable. */
span.thread-edited {
	font-size: 11px;
	color: var(--ink-muted);
	font-style: italic;
}
a.thread-edit {
	font-size: 11px;
	color: var(--ink-muted);
	font-style: italic;
	text-decoration: none;
}
a.thread-edit:hover {
	color: var(--accent);
	text-decoration: underline;
}
button.reply-cancel {
	background: transparent;
	border: 1px solid var(--ink-muted);
	color: var(--ink-muted);
	padding: 6px 14px;
	border-radius: 6px;
	font-family: inherit;
	cursor: pointer;
	margin-left: 8px;
}
button.reply-cancel:hover {
	color: var(--ink);
	border-color: var(--ink);
}
div.thread-body {
	color: var(--ink);
	font-size: 14px;
	line-height: 1.65;
}
div.thread-body p { margin: 0 0 12px 0; }
div.thread-body p:last-child { margin-bottom: 0; }
div.thread-body a { color: var(--accent-strong); text-decoration: underline; }

div.youtube-embed {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	margin: 18px 0 4px 0;
	background: rgb(20,14,8);
	border-radius: 10px;
	overflow: hidden;
}
div.youtube-embed iframe {
	position: absolute;
	top: 0; left: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

div.thread-replies {
	display: flex;
	flex-direction: column;
	gap: 14px;
	margin-top: 8px;
}
h3.thread-replies-header {
	font-family: 'Inter', Tahoma, sans-serif;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--ink-muted);
	margin: 0;
}

section.thread-section {
	background: var(--card-bg);
	border: 1px solid var(--card-border);
	border-radius: 12px;
	padding: 18px 24px 22px;
}
h3.thread-section-header {
	font-family: 'Inter', Tahoma, sans-serif;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--accent);
	margin: 0 0 14px 0;
}
/* Traditional English relationship name carried as a muted aside next
   to the explicit "N up, M down" primary header on the Relative tab.
   Lowercase + lighter weight so the primary stays the focal label. */
span.relative-traditional {
	font-weight: 400;
	color: var(--ink-muted);
	text-transform: none;
	letter-spacing: 0.04em;
}

div.thread-mentions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}
a.thread-mention {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 4px 12px 4px 4px;
	background: var(--sidebar-bg);
	border: 1px solid var(--card-border);
	border-radius: 999px;
	font-size: 12px;
	color: var(--ink);
}
a.thread-mention img {
	width: 28px;
	height: 28px;
	border-radius: 50%;
	object-fit: cover;
}
a.thread-mention:hover { background: rgba(155,118,76,0.10); color: var(--accent-strong); }
span.thread-mention-wrap {
	position: relative;
	display: inline-flex;
}
a.mention-untag {
	position: absolute;
	top: -6px;
	right: -6px;
	width: 18px;
	height: 18px;
	line-height: 16px;
	text-align: center;
	border-radius: 50%;
	font-size: 12px;
	background: var(--card-bg);
	border: 1px solid var(--card-border);
}
div.thread-mention-add {
	margin-top: 12px;
	font-size: 12px;
	color: var(--ink-muted);
}

/* Document attachments on AnecdoteView =============================== */
div.document-list {
	display: flex;
	flex-direction: column;
	gap: 8px;
}
a.document-item {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 14px;
	background: var(--sidebar-bg);
	border: 1px solid var(--card-border);
	border-radius: 8px;
	color: var(--ink);
}
a.document-item:hover {
	background: rgba(155,118,76,0.10);
	color: var(--accent-strong);
}
div.document-icon {
	flex-shrink: 0;
	width: 32px;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--accent);
}
div.document-meta { min-width: 0; }
div.document-name {
	font-family: 'Playfair Display', Georgia, serif;
	font-size: 14px;
	font-weight: 500;
	color: var(--ink);
}
div.document-kind {
	font-size: 11px;
	color: var(--ink-muted);
	text-transform: uppercase;
	letter-spacing: 0.12em;
	margin-top: 2px;
}
div.document-row {
	display: flex;
	align-items: center;
	gap: 8px;
}
div.document-row a.document-item { flex: 1; min-width: 0; }

/* Documents are grouped into one section with a tab bar. Each tab toggles
   a single panel containing a PDF iframe (or audio player). */
section.document-section {
	display: flex;
	flex-direction: column;
	padding-top: 0;
	padding-bottom: 18px;
}

/* Tab bar across the top — only rendered when 2+ documents. Tabs sit
   flush with the bottom border so the active tab merges into the panel. */
div.document-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	margin: -18px -24px 0 -24px;     /* bleed into the section's padding */
	padding: 12px 16px 0 16px;
	border-bottom: 1px solid var(--card-border);
}
div.document-tab {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 14px;
	background: transparent;
	border: 1px solid transparent;
	border-bottom: none;
	border-radius: 8px 8px 0 0;
	font-family: 'Inter', Tahoma, sans-serif;
	font-size: 13px;
	color: var(--ink-muted);
	cursor: pointer;
	position: relative;
	top: 1px;                         /* tuck under the tabs' bottom border */
	transition: background 0.12s, color 0.12s;
}
div.document-tab:hover { background: var(--sidebar-bg); color: var(--ink); }
div.document-tab.active {
	background: var(--card-bg);
	border-color: var(--card-border);
	border-bottom-color: var(--card-bg);   /* hide bottom border under active tab */
	color: var(--ink);
}
div.document-tab span.document-name {
	font-family: 'Playfair Display', Georgia, serif;
	font-size: 14px;
	font-weight: 500;
}
a.untag.tab-untag {
	margin-left: 2px;
	width: 18px;
	height: 18px;
	font-size: 13px;
}

/* Panel — only one visible at a time via the [hidden] attribute. */
div.document-panel { display: flex; flex-direction: column; gap: 12px; padding-top: 14px; }
div.document-panel[hidden] { display: none; }

div.document-panel-toolbar {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 12px;
	flex-wrap: wrap;
}
section.document-section.single div.document-panel-toolbar {
	justify-content: space-between;
}
div.document-section-title {
	display: flex;
	align-items: center;
	gap: 10px;
	min-width: 0;
}
span.document-icon-inline {
	display: inline-flex;
	align-items: center;
	color: var(--accent);
}
span.document-icon-inline svg { width: 20px; height: 20px; }
div.document-section-title span.document-name {
	font-family: 'Playfair Display', Georgia, serif;
	font-size: 16px;
	font-weight: 600;
	color: var(--ink);
}
div.document-panel-actions {
	display: flex;
	align-items: center;
	gap: 12px;
}
span.document-kind-chip {
	font-family: 'Inter', Tahoma, sans-serif;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--accent);
	background: var(--sidebar-bg);
	border: 1px solid var(--card-border);
	border-radius: 999px;
	padding: 2px 9px;
}
a.document-open-link {
	font-family: 'Inter', Tahoma, sans-serif;
	font-size: 12px;
	color: var(--accent);
	text-decoration: none;
	border-bottom: 1px dotted rgba(120,80,40,0.35);
}
a.document-open-link:hover { color: var(--accent-strong); border-bottom-color: var(--accent-strong); }

/* PDF inline embed. Tall enough to show a full transcription page; the
   browser's native PDF viewer handles paging/scroll inside. */
div.document-embed.pdf-embed {
	width: 100%;
	background: var(--sidebar-bg);
	border: 1px solid var(--card-border);
	border-radius: 10px;
	overflow: hidden;
}
div.document-embed.pdf-embed iframe {
	display: block;
	width: 100%;
	height: 900px;
	border: 0;
	background: var(--sidebar-bg);
}
div.document-embed.audio-embed audio {
	width: 100%;
}

div.upload-card-wrap {
	position: relative;
}

/* Anecdote photo display — punchier than the generic upload-grid. */
div.anecdote-photo-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 16px;
}
div.anecdote-photo-card-wrap { position: relative; }
a.anecdote-photo-card {
	display: block;
	background: var(--sidebar-bg);
	border: 1px solid var(--card-border);
	border-radius: 12px;
	overflow: hidden;
	transition: border-color 0.15s ease;
}
a.anecdote-photo-card:hover { border-color: var(--accent); }
a.anecdote-photo-card img {
	width: 100%;
	height: auto;
	display: block;
}

/* Single-photo hero — uncropped, centered, larger. */
div.anecdote-photo-hero-wrap {
	position: relative;
	display: flex;
	justify-content: center;
}
a.anecdote-photo-hero {
	display: inline-block;
	max-width: 100%;
	background: var(--sidebar-bg);
	border: 1px solid var(--card-border);
	border-radius: 12px;
	overflow: hidden;
	transition: border-color 0.15s ease;
}
a.anecdote-photo-hero:hover { border-color: var(--accent); }
a.anecdote-photo-hero img {
	display: block;
	max-width: 100%;
	max-height: 620px;
	width: auto;
	height: auto;
}

/* Edit-mode block under the byline (Story Teller picker). */
div.thread-edit-block {
	margin-top: 14px;
	padding: 14px 20px 16px;
	background: var(--card-bg);
	border: 1px solid var(--card-border);
	border-radius: 12px;
}
div.thread-edit-block h3.thread-section-header {
	margin-top: 0;
	margin-bottom: 8px;
}
div.thread-edit-row {
	display: flex;
	gap: 10px;
	align-items: center;
}
div.thread-edit-field {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 6px 0;
}
div.thread-edit-field + div.thread-edit-field {
	border-top: 1px solid var(--border-soft);
}
div.thread-edit-field label {
	font-family: 'Inter', Tahoma, sans-serif;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--accent);
	min-width: 110px;
}
input.thread-edit-input {
	font-family: 'Inter', Tahoma, sans-serif;
	font-size: 13px;
	background: rgb(252,247,232);
	border: 1px solid var(--card-border);
	border-radius: 8px;
	padding: 6px 10px;
	color: var(--ink);
	outline: none;
	transition: border-color 0.15s;
}
input.thread-edit-input:focus { border-color: var(--accent); }
div.thread-edit-hint {
	font-size: 12px;
	color: rgba(80,60,40,0.65);
	margin-top: 6px;
}

/* Title H1 in edit mode is rendered as an input. Match the H1 typography
   so the page doesn't shift visually between read and edit modes. */
input.thread-subject-input {
	display: block;
	width: 100%;
	box-sizing: border-box;
	background: transparent;
	border: none;
	border-bottom: 1px dashed transparent;
	padding: 0;
	margin: 0 0 12px 0;
	color: inherit;
	outline: none;
	transition: border-color 0.15s;
}
input.thread-subject-input:hover { border-bottom-color: var(--border-soft); }
input.thread-subject-input:focus { border-bottom-color: var(--accent); }
input.thread-subject-input::placeholder {
	color: rgba(80,60,40,0.35);
	font-style: italic;
}

/* Author / Story-Teller line in the byline. */
div.thread-storyteller {
	font-size: 13px;
	color: rgba(80,60,40,0.85);
}
div.thread-storyteller a {
	color: inherit;
	text-decoration: none;
	border-bottom: 1px dotted rgba(80,60,40,0.4);
}
div.thread-storyteller a:hover { border-bottom-color: rgba(80,60,40,0.9); }

a.attach-remove {
	position: absolute;
	top: 6px;
	right: 6px;
	background: rgba(0,0,0,0.55);
	color: white;
	width: 22px;
	height: 22px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	font-size: 12px;
	z-index: 1;
}
a.attach-remove:hover { background: rgb(200,60,60); color: white; }

section.thread-add {
	background: var(--card-bg);
	border: 1px solid var(--card-border);
	border-radius: 12px;
	padding: 14px 20px 16px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}
div.thread-add-row {
	display: flex;
	gap: 10px;
	align-items: center;
}
div.thread-add-row > .compose-subject { flex: 1; }
select.compose-kind {
	font-family: 'Inter', Tahoma, sans-serif;
	font-size: 13px;
	background: rgb(252,247,232);
	border: 1px solid var(--card-border);
	border-radius: 8px;
	padding: 8px 10px;
	color: var(--ink);
}
input.compose-file {
	font-family: 'Inter', Tahoma, sans-serif;
	font-size: 13px;
	color: var(--ink-muted);
}

/* Reply form on MessageView ========================================== */
section.thread-reply {
	background: var(--card-bg);
	border: 1px solid var(--card-border);
	border-radius: 12px;
	padding: 18px 24px 20px;
}
textarea.reply-textarea {
	font-family: 'Inter', Tahoma, sans-serif;
	font-size: 14px;
	line-height: 1.5;
	color: var(--ink);
	background: rgb(252,247,232);
	border: 1px solid var(--card-border);
	border-radius: 8px;
	padding: 10px 12px;
	width: 100%;
	box-sizing: border-box;
	resize: vertical;
	outline: none;
	transition: border-color 0.15s;
}
textarea.reply-textarea:focus { border-color: var(--accent); }
div.thread-reply-actions {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-top: 10px;
}
button.reply-submit {
	font-family: 'Inter', Tahoma, sans-serif;
	font-size: 13px;
	font-weight: 500;
	color: var(--cta-text);
	background: var(--cta-bg);
	border: none;
	border-radius: 8px;
	padding: 9px 18px;
	cursor: pointer;
}
button.reply-submit:hover { background: var(--accent-strong); }
span.thread-reply-status {
	font-size: 12px;
	color: var(--ink-muted);
	font-style: italic;
}

/* Inline compose form (new top-level message) ======================== */
section.thread-compose {
	display: flex;
	flex-direction: column;
	gap: 10px;
}
input.compose-subject {
	font-family: 'Playfair Display', Georgia, serif;
	font-size: 16px;
	font-weight: 600;
	color: var(--ink);
	background: rgb(252,247,232);
	border: 1px solid var(--card-border);
	border-radius: 8px;
	padding: 10px 12px;
	width: 100%;
	box-sizing: border-box;
	outline: none;
	transition: border-color 0.15s;
}
input.compose-subject:focus { border-color: var(--accent); }
textarea.compose-body {
	font-family: 'Inter', Tahoma, sans-serif;
	font-size: 14px;
	line-height: 1.5;
	color: var(--ink);
	background: rgb(252,247,232);
	border: 1px solid var(--card-border);
	border-radius: 8px;
	padding: 10px 12px;
	width: 100%;
	box-sizing: border-box;
	resize: vertical;
	outline: none;
	transition: border-color 0.15s;
}
textarea.compose-body:focus { border-color: var(--accent); }
div.compose-actions {
	display: flex;
	align-items: center;
	gap: 12px;
}
button.compose-submit {
	font-family: 'Inter', Tahoma, sans-serif;
	font-size: 13px;
	font-weight: 500;
	color: var(--cta-text);
	background: var(--cta-bg);
	border: none;
	border-radius: 8px;
	padding: 9px 20px;
	cursor: pointer;
}
button.compose-submit:hover { background: var(--accent-strong); }
span.compose-status {
	font-size: 12px;
	color: var(--ink-muted);
	font-style: italic;
}

/* PictureEdit two-column layout ====================================== */
/* Wider than the single-column thread page to accommodate a side panel. */
div.picture-page { max-width: 1040px; }
div.picture-layout {
	display: flex;
	gap: 22px;
	align-items: flex-start;
}
div.picture-main {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 18px;
}
aside.picture-side {
	flex: 0 0 300px;
	display: flex;
	flex-direction: column;
	gap: 16px;
}
@media (max-width: 880px) {
	div.picture-layout { flex-direction: column; }
	aside.picture-side { flex: 0 0 auto; width: 100%; }
}

/* Photo image — sits in its own card-like wrapper. The wrapper styles
   work for both the simple <a><img></a> view and the drag-replace div
   the photo widget emits in edit mode. */
div.picture-photo {
	background: var(--card-bg);
	border: 1px solid var(--card-border);
	border-radius: 12px;
	padding: 10px;
}
div.picture-photo img,
div.picture-photo a img {
	display: block;
	max-width: 100%;
	height: auto;
	border-radius: 8px;
}

/* Info-card field rows. label + value inline, modest spacing. */
div.picture-info-field {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 6px 0;
}
div.picture-info-field + div.picture-info-field {
	border-top: 1px solid var(--border-soft);
}
div.picture-info-field label {
	font-family: 'Inter', Tahoma, sans-serif;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--accent);
	min-width: 90px;
	flex: 0 0 auto;
}
span.picture-info-value {
	font-size: 13px;
	color: var(--ink);
	flex: 1;
}
span.picture-info-value a { color: inherit; border-bottom: 1px dotted rgba(80,60,40,0.4); text-decoration: none; }
span.picture-info-value a:hover { border-bottom-color: rgba(80,60,40,0.9); }
span.picture-info-empty {
	font-size: 13px;
	color: rgba(80,60,40,0.35);
	font-style: italic;
}
section.picture-info input.thread-edit-input,
section.picture-uploaded input.thread-edit-input {
	flex: 1;
	min-width: 0;
}

/* Map thumbnail below the Location row. Rounded corners on its own to
   match the surrounding card. */
a.picture-map {
	display: block;
	margin: 14px 0 0 0;
	border-radius: 8px;
	overflow: hidden;
	line-height: 0;
	border: 1px solid var(--card-border);
	transition: border-color 0.15s;
}
a.picture-map:hover { border-color: var(--accent); }
a.picture-map img {
	display: block;
	width: 100%;
	height: auto;
}

/* "People in This Photo" — vertical list of avatar+name rows. */
div.appear-list {
	display: flex;
	flex-direction: column;
	gap: 4px;
}
div.appear-row {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 6px 6px;
	border-radius: 8px;
}
div.appear-row:hover { background: rgba(155,118,76,0.08); }
a.appear-avatar { flex: 0 0 auto; line-height: 0; }
a.appear-avatar img {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	object-fit: cover;
	border: 1px solid var(--card-border);
}
div.appear-name { flex: 1; min-width: 0; font-size: 13px; }
div.appear-name a {
	color: var(--ink);
	text-decoration: none;
	border-bottom: 1px dotted transparent;
}
div.appear-name a:hover { border-bottom-color: rgba(80,60,40,0.5); color: var(--accent-strong); }
span.appear-age {
	font-size: 11px;
	color: var(--ink-muted);
	font-variant-numeric: tabular-nums;
	min-width: 18px;
	text-align: right;
}
span.appear-actions { display: flex; align-items: center; gap: 2px; flex: 0 0 auto; }
span.appear-actions a {
	font-size: 16px;
	line-height: 1;
	color: var(--ink-muted);
	text-decoration: none;
	padding: 2px 4px;
	border-radius: 4px;
}
span.appear-actions a:hover { color: var(--accent-strong); background: rgba(155,118,76,0.12); }

/* Add-person picker block — separated from the people list by a hairline. */
div.appear-add {
	margin-top: 12px;
	padding-top: 12px;
	border-top: 1px solid var(--border-soft);
	display: flex;
	flex-direction: column;
	gap: 6px;
}
div.appear-add label {
	font-family: 'Inter', Tahoma, sans-serif;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--accent);
}
div.appear-add .chimera input {
	width: 100%;
	box-sizing: border-box;
	font-family: 'Inter', Tahoma, sans-serif;
	font-size: 13px;
	background: rgb(252,247,232);
	border: 1px solid var(--card-border);
	border-radius: 8px;
	padding: 6px 10px;
	color: var(--ink);
	outline: none;
	transition: border-color 0.15s;
}
div.appear-add .chimera input:focus { border-color: var(--accent); }

/* Page-level list views (messages, etc.) =============================== */
div.page-list {
	max-width: 920px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	gap: 18px;
}
header.page-header h1 {
	font-family: 'Playfair Display', Georgia, serif;
	font-size: 28px;
	font-weight: 600;
	color: var(--ink);
	margin: 0 0 4px 0;
}

/* Recent-uploads grid ================================================ */
div.upload-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
	gap: 14px;
}
a.upload-card {
	display: block;
	aspect-ratio: 1;
	background: var(--sidebar-bg);
	border: 1px solid var(--border-soft);
	border-radius: 10px;
	overflow: hidden;
	transition: transform 0.12s, box-shadow 0.12s;
}
a.upload-card:hover {
	transform: translateY(-1px);
	box-shadow: 0 4px 14px rgba(60,40,20,0.10);
}
a.upload-card img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	border-radius: 0;
}

/* Story cards ========================================================= */
div.story-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
	gap: 14px;
}
a.story-card {
	display: flex;
	flex-direction: column;
	background: var(--sidebar-bg);
	border: 1px solid var(--border-soft);
	border-radius: 10px;
	overflow: hidden;
	color: var(--ink);
	transition: transform 0.12s, box-shadow 0.12s;
}
a.story-card:hover {
	transform: translateY(-1px);
	box-shadow: 0 4px 14px rgba(60,40,20,0.08);
}
div.story-card-image {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 110px;
	background: rgb(232,222,200);
	color: var(--ink-faint);
}
div.story-card-body { padding: 10px 12px 12px; }
div.story-card-title {
	font-family: 'Playfair Display', Georgia, serif;
	font-size: 13px;
	font-weight: 600;
	color: var(--ink);
	line-height: 1.25;
	margin-bottom: 4px;
}
div.story-card-date {
	font-size: 11px;
	color: var(--ink-muted);
	margin-bottom: 6px;
}
div.story-card-author {
	font-size: 11px;
	color: var(--ink-muted);
	font-style: italic;
}

/* SproutBorder cards ================================================= */
div.sprout-card {
	background: var(--card-bg);
	border: 1px solid var(--card-border);
	border-radius: 12px;
	padding: 16px 18px;
	margin: 0 0 16px 0;
	overflow: hidden;
}
div.sprout-card.sprout-card-center { margin-left: auto; margin-right: auto; }
div.sprout-card.sprout-card-shrink { display: inline-block; }

/* SproutTabs — section-header style ================================== */
div.sprout-tabs {
	background: var(--card-bg);
	border: 1px solid var(--card-border);
	border-radius: 12px;
	margin: 0 0 18px 0;
	overflow: hidden;
}
div.sprout-tabs.sprout-tabs-fit { width: 100%; }
div.sprout-tabs-header {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 12px 16px 8px;
	border-bottom: 1px solid var(--border-soft);
	flex-wrap: wrap;
}
.sprout-tab {
	font-family: 'Inter', Tahoma, sans-serif;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--ink-muted);
	padding: 4px 0;
	border-bottom: 2px solid transparent;
	text-decoration: none;
	white-space: nowrap;
}
.sprout-tab.active {
	color: var(--ink);
	border-bottom-color: var(--accent);
}
a.sprout-tab:hover { color: var(--accent-strong); }
.sprout-tab-extra { margin-left: auto; font-size: 11px; color: var(--ink-muted); }
div.sprout-tabs-body { padding: 4px 14px 12px; }
div.sprout-tabs-body table { background: transparent !important; }

/* Generic rack styling (Rack widget — person info card etc.) ========= */
table.rack {
	background: var(--card-bg);
	border: 1px solid var(--card-border);
	border-radius: 10px;
	overflow: hidden;
	font-family: 'Inter', Tahoma, sans-serif;
}
td.rackHeader {
	color: var(--ink-muted);
	font-family: 'Inter', Tahoma, sans-serif;
	font-size: 11px;
	font-weight: 500;
	text-align: right;
	padding: 5px 5px 5px 10px;
	letter-spacing: 0.02em;
	white-space: nowrap;
}
td.rackData {
	color: var(--ink);
	font-family: 'Inter', Tahoma, sans-serif;
	font-size: 12px;
	font-weight: 500;
	padding: 5px 10px 5px 5px;
	white-space: nowrap;
}

/* Default tr.even/odd/topLevel — compact Inter at small size, no
   backgrounds (so the pedigree's diagonal-line PNGs still show through).
   archive-section overrides below add backgrounds for splash cards. */
tr.even, tr.odd, tr.topLevel {
	font-family: 'Inter', Tahoma, sans-serif;
	font-size: 11px;
	line-height: 1.35;
	color: var(--ink);
}
tr.even td, tr.odd td, tr.topLevel td {
	padding: 4px 6px;
}

/* Page chrome / consoles ============================================== */
td.context {
	color: var(--ink);
	font-family: 'Playfair Display', Georgia, serif;
	font-size: 18px;
	font-weight: 600;
}
td.display {
	color: var(--ink);
	font-family: 'Inter', Tahoma, sans-serif;
	font-size: 13px;
	font-weight: 500;
}
td.display a:link, td.display a:visited { color: var(--ink); }
td.display a:hover { color: var(--accent-strong); }

td.menu {
	font-family: 'Inter', Tahoma, sans-serif;
	font-size: 12px;
	font-weight: 500;
}
td.selected {
	color: var(--ink);
	font-family: 'Playfair Display', Georgia, serif;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.04em;
}
td.unselected {
	color: var(--ink-muted);
	font-family: 'Inter', Tahoma, sans-serif;
	font-size: 13px;
	font-weight: 500;
}
td.title {
	color: var(--ink-muted);
	font-family: 'Inter', Tahoma, sans-serif;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	background: var(--sidebar-bg);
	border-bottom: 1px solid var(--card-border);
	padding: 6px 8px;
}
td.calendar {
	color: var(--ink-muted);
	font-family: 'Inter', Tahoma, sans-serif;
	font-size: 11px;
	font-weight: 500;
	background: rgb(228,222,205);
}
td.daysOfWeek {
	color: var(--ink-muted);
	font-family: 'Inter', Tahoma, sans-serif;
	font-size: 10px;
	font-weight: 600;
	background: var(--sidebar-bg);
}

/* Row striping — only inside our archive sections (Message Board, etc.).
   Generic tr.even/odd elsewhere (like the pedigree's PNG-line tables
   that also use tr.odd) stay transparent so connecting-line images
   show through. */
section.archive-section tr.even {
	color: var(--ink);
	font-family: 'Inter', Tahoma, sans-serif;
	font-size: 12px;
	background: var(--card-bg);
}
section.archive-section tr.odd {
	color: var(--ink);
	font-family: 'Inter', Tahoma, sans-serif;
	font-size: 12px;
	background: rgb(248,243,225);
}
section.archive-section tr.topLevel {
	color: var(--ink);
	font-family: 'Inter', Tahoma, sans-serif;
	font-size: 12px;
	font-weight: 500;
	background: rgb(228,222,205);
}

/* Inputs & buttons ==================================================== */
input[type="text"], input[type="password"], textarea {
	font-family: 'Inter', Tahoma, sans-serif;
	font-size: 13px;
	color: var(--ink);
	background: var(--card-bg);
	border: 1px solid var(--card-border);
	border-radius: 6px;
	padding: 5px 8px;
	outline: none;
	transition: border-color 0.15s;
}
input[type="text"]:focus, input[type="password"]:focus {
	border-color: var(--accent);
}

input[type="submit"], button {
	font-family: 'Inter', Tahoma, sans-serif;
	font-size: 13px;
	font-weight: 500;
	color: var(--cta-text);
	background: var(--cta-bg);
	border: none;
	border-radius: 6px;
	padding: 7px 16px;
	cursor: pointer;
	transition: background 0.15s;
}
input[type="submit"]:hover, button:hover {
	background: var(--accent-strong);
}

/* Existing chimera + dropzone + untag (already styled — refresh palette) */
span.chimera, span.mapbox-place { position: relative; display: inline-block; }
span.chimera input, span.mapbox-place input {
	font-family: 'Inter', Tahoma, sans-serif;
	font-size: 13px;
}
span.chimera.chimera-inflight input,
span.mapbox-place.autoedit-inflight input { background: rgb(245,235,200); }
div.chimera-panel {
	position: absolute;
	top: 100%; left: 0;
	z-index: 10;
	background: var(--card-bg);
	border: 1px solid var(--card-border);
	border-radius: 8px;
	font-family: 'Inter', Tahoma, sans-serif;
	font-size: 13px;
	min-width: 100%;
	max-height: 240px;
	overflow-y: auto;
	box-shadow: 0 4px 18px rgba(0,0,0,0.08);
}
div.chimera-item { padding: 6px 12px; cursor: pointer; color: var(--ink); }
div.chimera-item-hi { background: rgba(155,118,76,0.16); color: var(--accent-strong); }
div.chimera-item:hover { background: rgba(155,118,76,0.10); }

img[src*="pictures/"] { border-radius: 8px; }

a.untag {
	color: var(--ink-faint);
	font-weight: bold;
	font-size: 14px;
	text-decoration: none;
	padding: 0 4px;
	border-radius: 8px;
}
a.untag:hover { color: rgb(180,60,60); }
a.untag.confirming { color: white; background: rgb(200,60,60); }

/* Inline link styles for the AdminUnclaimed page. */
a.send-invite-link {
	margin-left: 8px;
	font-size: 12px;
	color: var(--accent);
	text-decoration: none;
	font-style: normal;
	text-transform: lowercase;
}
a.send-invite-link:hover { text-decoration: underline; }
a.send-invite-link.sent {
	color: var(--ink-muted);
	pointer-events: none;
}

a.delete-link {
	color: var(--ink-muted);
	font-size: 12px;
	text-decoration: none;
	text-transform: lowercase;
	padding: 2px 8px;
	border-radius: 4px;
}
a.delete-link:hover { color: rgb(180,60,60); }
a.delete-link.armed {
	color: white;
	background: rgb(200,60,60);
	font-weight: 600;
}

div.dropzone {
	border: 2px dashed var(--card-border);
	border-radius: 12px;
	background: var(--card-bg);
	padding: 20px 14px;
	margin-bottom: 20px;
	text-align: center;
	font-size: 12px;
	color: var(--ink-muted);
	transition: background 0.15s, border-color 0.15s;
}
div.dropzone.dragover {
	background: rgba(155,118,76,0.12);
	border-color: var(--accent);
	border-style: solid;
}
div.dropzone.uploading { opacity: 0.6; pointer-events: none; }

/* Photo replace (PictureEdit edit-mode). Invisible at rest; the overlay
   only reveals on dragenter so casual viewers never notice the affordance. */
div.photo-replace { position: relative; display: inline-block; line-height: 0; }
div.photo-replace img { display: block; }
div.photo-replace-overlay {
	position: absolute;
	inset: 0;
	display: none;
	align-items: center;
	justify-content: center;
	background: rgba(0,0,0,0.55);
	color: white;
	font-family: var(--font-sans);
	font-weight: 600;
	font-size: 16px;
	letter-spacing: 0.04em;
	pointer-events: none;
}
div.photo-replace.dragover img { opacity: 0.55; }
div.photo-replace.dragover .photo-replace-overlay { display: flex; }
div.photo-replace.uploading img { opacity: 0.4; }
div.photo-replace.uploading .photo-replace-overlay { display: flex; }
div.dropzone-prompt {
	font-size: 12px;
	font-weight: 500;
	margin-bottom: 10px;
	color: var(--ink);
}
button.dropzone-button {
	font-size: 12px;
	padding: 6px 14px;
	border-radius: 6px;
	background: var(--cta-bg);
	color: var(--cta-text);
	border: none;
}
button.dropzone-button:hover { background: var(--accent-strong); }
div.dropzone-status {
	margin-top: 8px;
	font-size: 11px;
	color: var(--ink-muted);
	min-height: 12px;
}

/* Login page ========================================================== */
body.login-page {
	background: var(--cream-bg) url(back.jpg);
	background-blend-mode: multiply;
	background-size: cover;
	background-position: center;
	min-height: 100vh;
}
div.login-stage {
	min-height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 40px 20px;
}
div.login-card {
	width: 380px;
	max-width: 100%;
	padding: 44px 38px 38px;
	background: rgb(245,238,222);
	border: 1px solid var(--card-border);
	border-radius: 18px;
	box-shadow: 0 12px 40px rgba(40,28,18,0.18);
	text-align: center;
}
div.login-card h1.ida-title {
	margin: 0 0 14px 0;
}
div.login-card img.ida-tagline-divider {
	margin: 0 auto 18px;
}
p.login-welcome {
	font-family: 'Playfair Display', Georgia, serif;
	font-size: 16px;
	color: var(--ink);
	margin: 0 0 24px 0;
	font-style: italic;
}
div.login-error {
	background: rgba(200,60,60,0.10);
	border: 1px solid rgba(200,60,60,0.30);
	border-radius: 8px;
	padding: 10px 14px;
	font-size: 12px;
	color: rgb(170,40,40);
	margin-bottom: 18px;
}
form.login-form {
	text-align: left;
	display: flex;
	flex-direction: column;
	gap: 14px;
}
div.login-field {
	display: flex;
	flex-direction: column;
	gap: 4px;
}
div.login-field label {
	font-family: 'Inter', Tahoma, sans-serif;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ink-muted);
}
div.login-field input {
	font-family: 'Inter', Tahoma, sans-serif;
	font-size: 14px;
	color: var(--ink);
	background: var(--card-bg);
	border: 1px solid var(--card-border);
	border-radius: 8px;
	padding: 10px 12px;
	outline: none;
	transition: border-color 0.15s;
}
div.login-field input:focus {
	border-color: var(--accent);
}
button.login-cta {
	margin-top: 8px;
	font-family: 'Inter', Tahoma, sans-serif;
	font-size: 14px;
	font-weight: 500;
	color: var(--cta-text);
	background: var(--cta-bg);
	border: none;
	border-radius: 8px;
	padding: 12px;
	cursor: pointer;
	letter-spacing: 0.02em;
	transition: background 0.15s;
}
button.login-cta:hover {
	background: var(--accent-strong);
}
p.login-foot {
	margin: 28px 0 0 0;
	font-style: italic;
	font-size: 12px;
	line-height: 1.45;
	color: var(--ink-muted);
}
/* "Forgot password?" link + "(M/D/YYYY, to verify it's you)" hint —
   small ancillary text under the form. */
a.login-forgot {
	display: block;
	margin-top: 14px;
	text-align: center;
	font-size: 12px;
	color: var(--ink-muted);
	text-decoration: none;
}
a.login-forgot:hover { color: var(--accent-strong); text-decoration: underline; }
span.login-hint {
	font-weight: 400;
	color: var(--ink-muted);
	font-size: 11px;
}

/* Signup page — the "claim" card showing whose record you're taking. */
div.signup-claim {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 12px 0 18px 0;
	padding: 12px 16px;
	background: var(--sidebar-bg);
	border: 1px solid var(--card-border);
	border-radius: 12px;
}
img.signup-claim-avatar {
	width: 56px;
	height: 56px;
	object-fit: cover;
	border-radius: 8px;
	border: 1px solid var(--card-border);
}
div.signup-claim-name {
	font-family: 'Playfair Display', Georgia, serif;
	font-size: 20px;
	font-weight: 600;
	color: var(--ink);
}

/* "Send Invite" button on PersonEdit header. */
div.person-header-actions {
	margin-left: auto;
}
button.send-invite-btn {
	font-family: 'Inter', Tahoma, sans-serif;
	font-size: 13px;
	font-weight: 500;
	color: var(--cta-text);
	background: var(--cta-bg);
	border: none;
	border-radius: 8px;
	padding: 9px 16px;
	cursor: pointer;
	transition: background 0.15s;
}
button.send-invite-btn:hover { background: var(--accent-strong); }

/* Send-invite modal body — single URL input + copy button + status. */
div.invite-modal-card { width: min(540px, 92vw); }
div.invite-modal-body {
	display: flex;
	flex-direction: column;
	gap: 14px;
}
p.invite-modal-hint {
	font-size: 13px;
	color: var(--ink);
	line-height: 1.5;
	margin: 0;
}
div.invite-url-row {
	display: flex;
	flex-wrap: wrap;       /* URL on row 1, buttons wrap to row 2 */
	justify-content: flex-end;
	gap: 8px;
}
input#invite-url {
	flex: 1 1 100%;        /* take the full row to itself */
	min-width: 0;
	font-family: 'Inter', Tahoma, sans-serif;
	font-size: 12px;
	color: var(--ink);
	background: var(--sidebar-bg);
	border: 1px solid var(--card-border);
	border-radius: 8px;
	padding: 8px 10px;
}
button#invite-copy,
button#invite-share {
	font-family: 'Inter', Tahoma, sans-serif;
	font-size: 12px;
	font-weight: 500;
	color: var(--cta-text);
	background: var(--cta-bg);
	border: none;
	border-radius: 8px;
	padding: 8px 14px;
	cursor: pointer;
	white-space: nowrap;
}
button#invite-copy:hover,
button#invite-share:hover { background: var(--accent-strong); }
button#invite-share[hidden] { display: none; }
div.invite-status {
	font-size: 12px;
	color: var(--ink-muted);
	font-style: italic;
}

/* Admin Users list (adminUsers view) ================================== */
div.admin-users-stats,
div.admin-stats {
	font-family: 'Inter', Tahoma, sans-serif;
	font-size: 13px;
	color: var(--ink-muted);
	margin: 0 0 18px 0;
	padding: 10px 16px;
	background: var(--card-bg);
	border: 1px solid var(--card-border);
	border-radius: 10px;
}
div.admin-users-stats strong,
div.admin-stats strong {
	color: var(--ink);
	font-weight: 600;
}

/* Place-path links — components of "Maebashi, Gunma, Japan" click
   through to their respective PlaceEdit pages. Subtle styling so the
   path stays readable as a sentence; hover lifts the accent. */
a.place-link {
	color: inherit;
	text-decoration: none;
	border-bottom: 1px dotted rgba(80,60,40,0.35);
}
a.place-link:hover {
	color: var(--accent-strong);
	border-bottom-color: var(--accent-strong);
}

/* AdminPlaces Add form ================================================ */
form.add-place-form {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 16px 0;
	padding: 10px 14px;
	background: var(--card-bg);
	border: 1px solid var(--card-border);
	border-radius: 10px;
	font-family: 'Inter', Tahoma, sans-serif;
}
form.add-place-form label {
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--accent);
	margin-right: 4px;
}
form.add-place-form input[type=text] {
	flex: 1;
	min-width: 0;
	font-size: 13px;
	background: rgb(252,247,232);
	border: 1px solid var(--card-border);
	border-radius: 6px;
	padding: 6px 10px;
	color: var(--ink);
	outline: none;
}
form.add-place-form input[type=text]:focus { border-color: var(--accent); }
form.add-place-form button {
	font-family: 'Inter', Tahoma, sans-serif;
	font-size: 13px;
	font-weight: 500;
	padding: 6px 16px;
	background: var(--accent);
	color: #fff;
	border: 0;
	border-radius: 6px;
	cursor: pointer;
}
form.add-place-form button:hover { background: var(--accent-strong); }

/* AdminPlaces list ==================================================== */
div.places-filter {
	font-family: 'Inter', Tahoma, sans-serif;
	font-size: 12px;
	color: var(--ink-muted);
	margin: 0 0 12px 0;
}
div.places-filter a {
	color: var(--accent-strong);
	text-decoration: none;
	border-bottom: 1px dotted rgba(155,118,76,0.5);
}
div.places-filter a:hover { border-bottom-color: var(--accent-strong); }

span.place-level {
	display: inline-block;
	font-family: 'Inter', Tahoma, sans-serif;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.10em;
	text-transform: uppercase;
	padding: 2px 8px;
	border-radius: 999px;
	border: 1px solid var(--card-border);
	color: var(--ink-muted);
	background: var(--sidebar-bg);
}
span.place-level-1 { color: var(--accent-strong); border-color: rgba(155,118,76,0.5); }
span.place-level-2 { color: var(--ink); }
span.place-level-3 { color: var(--ink-muted); }

table.places-grid {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	font-family: 'Inter', Tahoma, sans-serif;
	font-size: 13px;
	color: var(--ink);
}
table.places-grid thead th {
	text-align: left;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--accent);
	padding: 4px 8px;
	border-bottom: 1px solid var(--border-soft);
}
table.places-grid th.col-count  { text-align: center; width: 36px; }
table.places-grid th.col-abbr   { width: 60px; }
table.places-grid th.col-coords { text-align: center; width: 60px; }
table.places-grid th.col-parent { width: 25%; }
table.places-grid tbody td {
	padding: 6px 8px;
	border-bottom: 1px solid var(--border-soft);
	vertical-align: middle;
}
table.places-grid tbody tr:hover td { background: rgba(155,118,76,0.04); }
table.places-grid td.col-count,
table.places-grid td.col-coords {
	text-align: center;
	font-variant-numeric: tabular-nums;
	color: var(--ink-muted);
}
table.places-grid td.col-name a,
table.places-grid td.col-parent a {
	color: var(--ink);
	text-decoration: none;
	border-bottom: 1px dotted transparent;
}
table.places-grid td.col-name a:hover,
table.places-grid td.col-parent a:hover {
	color: var(--accent-strong);
	border-bottom-color: rgba(80,60,40,0.5);
}

/* PlaceEdit ========================================================== */
div.place-page { max-width: 760px; }
nav.place-crumb {
	font-family: 'Inter', Tahoma, sans-serif;
	font-size: 12px;
	color: var(--ink-muted);
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 6px;
	margin-bottom: 4px;
}
nav.place-crumb a {
	color: var(--ink-muted);
	text-decoration: none;
	border-bottom: 1px dotted transparent;
}
nav.place-crumb a:hover { color: var(--accent-strong); border-bottom-color: rgba(80,60,40,0.5); }
span.place-crumb-sep { color: rgba(80,60,40,0.35); }

div.thread-edit-block.place-info { margin-top: 14px; }
span.place-info-value {
	font-size: 13px;
	color: var(--ink);
	font-variant-numeric: tabular-nums;
}
a.place-info-link {
	font-size: 13px;
	color: var(--ink);
	text-decoration: none;
	border-bottom: 1px dotted rgba(80,60,40,0.4);
}
a.place-info-link:hover { color: var(--accent-strong); border-bottom-color: rgba(80,60,40,0.9); }

a.picture-map.place-map { margin-top: 14px; }

/* People-here lists — avatar + name + (optional) year, wraps like the
   thread-mentions chip row but a touch larger to make room for the year. */
div.place-people {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
a.place-person {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 4px 12px 4px 4px;
	background: var(--sidebar-bg);
	border: 1px solid var(--card-border);
	border-radius: 999px;
	font-size: 13px;
	color: var(--ink);
	text-decoration: none;
}
a.place-person:hover { background: rgba(155,118,76,0.10); color: var(--accent-strong); }
a.place-person img {
	width: 28px;
	height: 28px;
	border-radius: 50%;
	object-fit: cover;
}
span.place-person-name { font-weight: 500; }
span.place-person-year {
	color: var(--ink-muted);
	font-variant-numeric: tabular-nums;
	font-size: 12px;
}
div.admin-users-list {
	display: flex;
	flex-direction: column;
}
div.admin-user-row {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 10px 0;
	border-top: 1px solid var(--border-soft);
}
div.admin-user-row:first-child { border-top: none; padding-top: 0; }
.admin-user-avatar {
	flex-shrink: 0;
	display: block;
	width: 40px; height: 40px;
}
.admin-user-avatar img {
	width: 40px; height: 40px;
	object-fit: cover;
	border-radius: 8px;
	border: 1px solid var(--card-border);
	display: block;
}
a.admin-user-avatar:hover img { border-color: var(--accent); }
div.admin-user-meta {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.admin-user-name {
	font-family: 'Playfair Display', Georgia, serif;
	font-size: 15px;
	font-weight: 500;
	color: var(--ink);
	text-decoration: none;
}
a.admin-user-name:hover { color: var(--accent-strong); }
.admin-user-email {
	font-family: 'Inter', Tahoma, sans-serif;
	font-size: 12px;
	color: var(--ink-muted);
}
.admin-user-unclaimed { font-style: italic; color: var(--ink-faint); }
div.admin-user-logged {
	font-family: 'Inter', Tahoma, sans-serif;
	font-size: 12px;
	color: var(--ink-muted);
	white-space: nowrap;
}
span.admin-user-never {
	color: var(--ink-faint);
	font-style: italic;
}

/* People search field ================================================= */
div.people-search {
	margin: 0 0 20px 0;
}
label.search-input-wrap {
	position: relative;
	display: block;
	max-width: 520px;
}
svg.search-icon {
	position: absolute;
	left: 14px;
	top: 50%;
	transform: translateY(-50%);
	color: var(--ink-muted);
	pointer-events: none;
}
input.search-input {
	width: 100%;
	box-sizing: border-box;
	font-family: 'Inter', Tahoma, sans-serif;
	font-size: 16px;
	color: var(--ink);
	background: var(--card-bg);
	border: 1px solid var(--card-border);
	border-radius: 10px;
	padding: 12px 14px 12px 44px;
	outline: none;
	transition: border-color 0.15s, box-shadow 0.15s;
}
input.search-input:focus {
	border-color: var(--accent);
	box-shadow: 0 0 0 3px rgba(155,118,76,0.12);
}
input.search-input::placeholder {
	color: var(--ink-faint);
	font-style: italic;
}
label.search-input-wrap:focus-within svg.search-icon {
	color: var(--accent);
}

/* PersonEdit page header — avatar + display name in a single banner. */
header.person-header {
	display: flex;
	align-items: center;
	gap: 22px;
	padding: 18px 24px;
	background: var(--card-bg);
	border: 1px solid var(--card-border);
	border-radius: 12px;
	margin-bottom: 20px;
}
header.person-header h1.person-name {
	font-family: 'Playfair Display', Georgia, serif;
	font-size: 32px;
	font-weight: 600;
	color: var(--ink);
	margin: 0;
	line-height: 1.1;
}
/* When the avatar is the click-through to the other view (Person ↔
   User), give it a subtle hover affordance so it reads as interactive. */
a.person-avatar-link {
	text-decoration: none;
	transition: border-color 0.15s, box-shadow 0.15s;
}
a.person-avatar-link:hover {
	border-color: var(--accent);
	box-shadow: 0 0 0 3px rgba(155,118,76,0.12);
}

/* Marriages section on PersonEdit ===================================== */
section.person-marriages,
section.person-list {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 16px 20px;
	margin-bottom: 16px;     /* breathing room between back-to-back family cards */
}
div.marriage-row {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 8px 0;
	border-bottom: 1px solid var(--border-soft);
}
div.marriage-row:last-of-type { border-bottom: none; }
a.marriage-spouse {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	text-decoration: none;
	color: var(--ink);
	min-width: 160px;
}
img.marriage-avatar {
	width: 36px;
	height: 36px;
	object-fit: cover;
	border-radius: 6px;
	border: 1px solid var(--card-border);
}
span.marriage-name {
	font-family: 'Playfair Display', Georgia, serif;
	font-size: 13px;
	font-weight: 500;
}

/* Dates column in Parents/Siblings/Children rows (no "Born:" label —
   just the dates, with an en-dash separator for deceased people). */
div.person-list-dates {
	display: inline-flex;
	align-items: baseline;
	gap: 14px;
	font-family: 'Inter', Tahoma, sans-serif;
	font-size: 11px;
	color: var(--ink-muted);
}
span.person-list-date { white-space: nowrap; }
a.marriage-spouse:hover { color: var(--accent-strong); }
div.marriage-meta {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	flex: 1;
}
label.marriage-meta-label {
	font-family: 'Inter', Tahoma, sans-serif;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--accent);
}
input.marriage-date {
	font-family: 'Inter', Tahoma, sans-serif;
	font-size: 13px;
	background: rgb(252,247,232);
	border: 1px solid var(--card-border);
	border-radius: 6px;
	padding: 4px 8px;
	color: var(--ink);
	width: 110px;
	outline: none;
	transition: border-color 0.15s;
}
input.marriage-date:focus { border-color: var(--accent); }
span.marriage-date-readonly {
	font-family: 'Inter', Tahoma, sans-serif;
	font-size: 13px;
	color: var(--ink);
}
div.marriage-link-row {
	display: flex;
	align-items: center;
	gap: 8px;
	padding-top: 8px;
}

/* Person avatar frame (PersonEdit + UserView). Element-agnostic so the
   same frame applies whether the avatar is a static <div> or a clickable
   <a class="person-avatar person-avatar-link">. */
.person-avatar {
	display: inline-block;
	background: var(--sidebar-bg);
	border: 1px solid var(--card-border);
	border-radius: 12px;
	padding: 6px;
	line-height: 0;
}
.person-avatar img {
	display: block;
	border-radius: 8px;
}

/* Avatar crop modal =================================================== */
body.modal-open { overflow: hidden; }

div.crop-modal {
	position: fixed;
	inset: 0;
	z-index: 9000;
	display: flex;
	align-items: center;
	justify-content: center;
}
div.crop-modal[hidden] { display: none; }

div.crop-modal-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(28,18,8,0.55);
	backdrop-filter: blur(2px);
}

div.crop-modal-card {
	position: relative;
	width: min(1100px, 92vw);
	max-height: 92vh;
	background: var(--card-bg);
	border: 1px solid var(--card-border);
	border-radius: 14px;
	box-shadow: 0 20px 60px rgba(28,18,8,0.45);
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

header.crop-modal-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 14px 22px;
	border-bottom: 1px solid var(--border-soft);
}
header.crop-modal-header h2 {
	font-family: 'Playfair Display', Georgia, serif;
	font-size: 20px;
	font-weight: 600;
	color: var(--ink);
	margin: 0;
}
button.crop-modal-close {
	background: transparent;
	border: none;
	color: var(--ink-muted);
	font-size: 26px;
	line-height: 1;
	cursor: pointer;
	padding: 4px 8px;
}
button.crop-modal-close:hover { color: var(--accent-strong); }

div.crop-modal-body {
	display: grid;
	grid-template-columns: 1fr 220px;
	gap: 20px;
	padding: 18px 22px;
	flex: 1;
	min-height: 0;
}
div.crop-stage {
	background: rgb(245,238,222);
	border: 1px solid var(--card-border);
	border-radius: 10px;
	overflow: hidden;
	min-height: 420px;
	max-height: 65vh;
}
div.crop-stage img {
	display: block;
	max-width: 100%;
}
aside.crop-preview-pane {
	display: flex;
	flex-direction: column;
	gap: 8px;
	align-items: center;
}
div.crop-preview-label,
div.crop-preview-small-label {
	font-family: 'Inter', Tahoma, sans-serif;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--accent);
	margin-top: 6px;
}
div.crop-preview {
	width: 100px;
	height: 120px;
	overflow: hidden;
	border: 1px solid var(--card-border);
	border-radius: 6px;
	background: var(--sidebar-bg);
}
div.crop-preview-small {
	width: 50px;
	height: 60px;
	overflow: hidden;
	border: 1px solid var(--card-border);
	border-radius: 4px;
	background: var(--sidebar-bg);
}

footer.crop-modal-footer {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 14px 22px;
	border-top: 1px solid var(--border-soft);
	background: var(--sidebar-bg);
}
div.crop-zoom-controls {
	display: flex;
	gap: 6px;
}
div.crop-zoom-controls button {
	font-family: 'Inter', Tahoma, sans-serif;
	font-size: 14px;
	min-width: 36px;
	padding: 6px 10px;
	background: var(--card-bg);
	border: 1px solid var(--card-border);
	border-radius: 8px;
	color: var(--ink);
	cursor: pointer;
}
div.crop-zoom-controls button:hover { border-color: var(--accent); color: var(--accent-strong); }
span.crop-status {
	flex: 1;
	font-size: 12px;
	color: var(--ink-muted);
	font-style: italic;
}
div.crop-modal-actions {
	display: flex;
	gap: 10px;
}
button.crop-btn-cancel,
button.crop-btn-save {
	font-family: 'Inter', Tahoma, sans-serif;
	font-size: 13px;
	font-weight: 500;
	border-radius: 8px;
	padding: 9px 18px;
	cursor: pointer;
	border: 1px solid var(--card-border);
}
button.crop-btn-cancel {
	background: var(--card-bg);
	color: var(--ink);
}
button.crop-btn-cancel:hover { border-color: var(--accent); }
button.crop-btn-save {
	background: var(--cta-bg);
	color: var(--cta-text);
	border-color: var(--cta-bg);
}
button.crop-btn-save:hover { background: var(--accent-strong); border-color: var(--accent-strong); }

/* Per-row Set-Avatar link in the PictureEdit appears table. */
a.avatar-link {
	display: inline-block;
	font-size: 16px;
	line-height: 1;
	color: var(--accent);
	text-decoration: none;
	padding: 2px 4px;
	border-radius: 4px;
}
a.avatar-link:hover { color: var(--accent-strong); background: rgba(155,118,76,0.10); }

/* Misc decorations from original ====================================== */
div.iconParent { z-index:1; position:absolute; top:16px; left:16px; }
div.iconChild  { z-index:1; position:absolute; top:16px; left:33px; }
div.glare      { background: url("glare.png"); width: 149px; height: 63px; z-index:2; position:absolute; cursor:pointer; }
div.glareChild { background: url("glare.png"); left: 17px; width: 149px; height: 63px; z-index:2; position:absolute; cursor:pointer; }