/* temenos.place stylesheet */

@font-face {
	font-family: 'Literata';
	font-style: normal;
	font-weight: 200 900;
	font-display: swap;
	src: url('/static/fonts/literata-400.woff2') format('woff2-variations');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Literata';
	font-style: italic;
	font-weight: 200 900;
	font-display: swap;
	src: url('/static/fonts/literata-italic-400.woff2') format('woff2-variations');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
	--bg:        #fcf8f1;
	--ink:      #2a2a2a;
	--ink-soft: #6a6a6a;
	--accent:   #524863;
	--accent-2: #a8556f;
	--rule:     #e7e1d5;
	--reply-bg: #ffffff;
	--muted-bg: #f4e9e9;
	--width:    36rem;

	--font-read: 'Literata', Georgia, 'Iowan Old Style', 'Apple Garamond', serif;
	--font-ui:   -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }

html, body {
	margin: 0;
	padding: 0;
	background: var(--bg);
	color: var(--ink);
	font-family: var(--font-read);
	font-size: 18px;
	line-height: 1.65;
}

/* UI elements use the system sans (buttons, labels, navigation, admin chrome,
   form inputs, alerts, metadata). Compose textareas stay in --font-read so
   the author types in the same voice the content will publish in. */
button,
input,
select,
label,
.site-header nav,
.site-footer,
.admin-marker,
.flash,
.error,
.cron-status,
.empty,
.char-counter,
.status-label,
.reply-meta,
.users-table,
.admin-section h3,
.post-editor-header,
.post-editor-actions,
.post-preview summary {
	font-family: var(--font-ui);
}

a { color: var(--accent); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--accent-2); }

h1, h2, h3, h4, h5, h6 {
	color: var(--accent);
	font-weight: 600;
	line-height: 1.25;
	margin: 1.5em 0 0.5em 0;
}
h1 { font-size: 1.6em; }
h2 { font-size: 1.4em; }
h3 { font-size: 1.2em; }
h4 { font-size: 1.05em; }
h5 { font-size: 1em; }
h6 { font-size: 1em; }
/* a heading that opens a post or essay shouldn't carry a leading gap */
h1:first-child, h2:first-child, h3:first-child,
h4:first-child, h5:first-child, h6:first-child { margin-top: 0; }

p { margin: 0 0 1em 0; }

blockquote {
	border-left: 3px solid var(--rule);
	margin: 0 0 1em 0;
	padding: 0 0 0 1em;
	color: var(--ink-soft);
	font-style: italic;
}

ul, ol {
	margin: 0 0 1em 0;
	padding-left: 1.5em;
}
li {
	margin-bottom: 0.25em;
	line-height: 1.6;
}
li::marker { color: var(--ink-soft); }

code {
	background: #eee5d6;
	padding: 0.1em 0.35em;
	border-radius: 3px;
	font-size: 0.92em;
	font-family: "SF Mono", Menlo, Consolas, monospace;
}

.sr-only {
	position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
	clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* layout containers */
.landing-container,
.temenos-container,
.essay-container,
.privacy-container,
.auth-container {
	max-width: var(--width);
	margin: 3rem auto;
	padding: 0 1.25rem;
}

/* header */
.site-header {
	max-width: var(--width);
	margin: 1.5rem auto 0;
	padding: 0 1.25rem;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
}
.site-header .brand {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	color: var(--accent);
	text-decoration: none;
	font-weight: 600;
	font-size: 1.5em;
	line-height: 1;
}
.site-header .brand:hover { color: var(--accent-2); }
.site-header .brand-icon {
	width: 1.1em;
	height: 1.1em;
	display: block;
}
.site-header nav a {
	margin-left: 1rem;
	font-size: 0.92em;
}

/* footer */
.site-footer {
	max-width: var(--width);
	margin: 3rem auto 2rem;
	padding: 0 1.25rem;
	font-size: 0.85em;
	color: var(--ink-soft);
	text-align: center;
}
.site-footer .dot {
	margin: 0 0.5em;
	color: var(--ink-soft);
}

/* flash + error (inline fallback; modals supersede these via JS) */
.flash, .error {
	background: #faf0e6;
	border: 1px solid var(--rule);
	padding: 0.75em 1em;
	margin-bottom: 1.5rem;
	border-radius: 4px;
	font-size: 0.95em;
}
.error { background: #fbe9ec; }

/* Modal — used for both promoted flashes and confirm dialogs */
.modal {
	position: fixed;
	inset: 0;
	z-index: 1000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1rem;
}
.modal-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(20, 18, 25, 0.45);
	cursor: pointer;
}
.modal-card {
	position: relative;
	background: var(--bg);
	border: 1px solid var(--rule);
	border-radius: 6px;
	padding: 1.75em 2em 1.5em;
	max-width: 32rem;
	width: 100%;
	box-shadow: 0 10px 40px rgba(40, 35, 50, 0.25);
	z-index: 1;
}
.modal-flash .modal-card { cursor: pointer; }
.modal-body {
	font-size: 1em;
	line-height: 1.5;
	word-break: break-word;
}
.modal-close {
	position: absolute;
	top: 0.35em;
	right: 0.55em;
	background: transparent;
	color: var(--ink-soft);
	border: none;
	font-size: 1.3em;
	line-height: 1;
	padding: 0.25em 0.5em;
	cursor: pointer;
	border-radius: 3px;
	margin: 0;
}
.modal-close:hover { color: var(--accent); background: transparent; }
.modal-actions {
	margin-top: 1.4em;
	display: flex;
	gap: 0.6em;
	justify-content: flex-end;
}
.modal-actions button { margin-top: 0; }
.modal-cancel {
	background: transparent;
	color: var(--accent);
	border: 1px solid var(--rule);
}
.modal-cancel:hover { background: var(--bg); color: var(--accent-2); }

/* essay */
.essay {
	font-size: 1.05em;
}
.essay p { margin-bottom: 1.25em; }

/* join section + signup form */
.join {
	margin-top: 2.5rem;
	padding-top: 2rem;
	border-top: 1px solid var(--rule);
}
.signup-form {
	margin: 1.5rem 0;
	display: grid;
	gap: 0.5rem;
}
.signup-form label {
	font-size: 0.85em;
	color: var(--ink-soft);
	margin-top: 0.5rem;
}
.signup-form input {
	padding: 0.55em 0.7em;
	font-size: 1em;
	border: 1px solid var(--rule);
	border-radius: 4px;
	background: #fff;
	color: inherit;
}
.signup-form input:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }

button, .signup-form button {
	background: var(--accent);
	color: #fff;
	border: none;
	padding: 0.6em 1.4em;
	font-size: 1em;
	border-radius: 4px;
	cursor: pointer;
	margin-top: 0.75rem;
	justify-self: start;
}
button:hover { background: var(--accent-2); }

/* fine print — explanatory text under primary actions */
.fineprint {
	font-size: 0.82em;
	color: var(--ink-soft);
	margin-top: 2.5rem;
	line-height: 1.5;
	max-width: 28rem;
	margin-left: auto;
	margin-right: auto;
}

/* auth / login form */
.auth-page .auth-container { text-align: center; }
.auth-page form { display: grid; gap: 0.5rem; max-width: 18rem; margin: 0 auto; }
.auth-page label { font-size: 0.85em; color: var(--ink-soft); text-align: left; }
.auth-page input {
	padding: 0.55em 0.7em; font-size: 1em; border: 1px solid var(--rule); border-radius: 4px; background: #fff;
}
.auth-page button { justify-self: center; }

/* Google sign-in button — neutral colors per Google brand guidelines */
.google-signin-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.6em;
	background: #fff;
	color: #3c4043;
	border: 1px solid #dadce0;
	padding: 0.55em 1em;
	font-size: 1em;
	border-radius: 4px;
	text-decoration: none;
	font-weight: 500;
	margin: 0 auto;
	max-width: 18rem;
	width: 100%;
	box-sizing: border-box;
}
.google-signin-btn:hover {
	background: #f6f6f6;
	color: #3c4043;
	border-color: #c0c0c0;
}
.google-signin-btn svg { flex-shrink: 0; }

/* "or" separator with horizontal rules flanking */
.auth-separator {
	display: flex;
	align-items: center;
	text-align: center;
	color: var(--ink-soft);
	font-size: 0.85em;
	margin: 1.2rem auto;
	max-width: 18rem;
}
.auth-separator::before,
.auth-separator::after {
	content: '';
	flex: 1;
	border-bottom: 1px solid var(--rule);
}
.auth-separator span { padding: 0 0.75rem; }

/* logged-in temenos view */
.post-date {
	font-family: var(--font-ui);
	font-size: 0.85em;
	color: var(--ink-soft);
	margin: 2rem 0 0 0;
	text-align: right;
}
.post {
	margin: 1.25rem 0 2.5rem;
}
.post-body {
	font-size: 1.1em;
	line-height: 1.55;
}
.reply-meta {
	font-size: 0.85em;
	color: var(--ink-soft);
	margin: 0.5em 0 0 0;
}

.reply-form {
	margin: 1.5rem 0 2rem;
	display: grid;
	gap: 0.5rem;
}
.reply-form textarea {
	width: 100%;
	min-height: 5em;
	padding: 0.65em 0.8em;
	font-size: 1em;
	font-family: inherit;
	line-height: 1.5;
	color: inherit;
	border: 1px solid var(--rule);
	border-radius: 4px;
	background: #fff;
	resize: vertical;
}
.reply-form textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
.reply-form-bottom {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
}
.char-counter {
	font-size: 0.85em;
	color: var(--ink-soft);
}
.char-counter.over { color: var(--accent-2); }

.replies {
	margin-top: 1.5rem;
	display: grid;
	gap: 1rem;
}
.reply {
	background: var(--reply-bg);
	border: 1px solid var(--rule);
	padding: 0.9em 1.1em;
	border-radius: 4px;
}
.reply-body {
	font-size: 1em;
	line-height: 1.5;
}
.reply-muted {
	background: var(--muted-bg);
	border-color: #d8b9b9;
}
.muted-indicator {
	color: var(--accent-2);
	font-style: italic;
}
.reply-own {
	border-color: var(--accent);
}

/* admin page (desktop-only by design) */
.admin-container {
	max-width: 56rem;
	margin: 2rem auto;
	padding: 0 1.25rem;
}
.admin-section {
	margin-bottom: 3rem;
	padding-bottom: 2rem;
	border-bottom: 1px solid var(--rule);
}
.admin-section h2 {
	margin-top: 0;
	font-size: 1.3em;
}
.admin-section h3 {
	margin-top: 1.5rem;
	font-size: 1em;
	color: var(--ink-soft);
	text-transform: uppercase;
	letter-spacing: 0.05em;
}
.admin-marker {
	color: var(--accent-2);
	font-size: 0.85em;
	margin-left: 1rem;
}
.cron-status {
	padding: 0.5em 0.8em;
	background: #eef4ee;
	border-radius: 4px;
	display: inline-block;
}
.cron-stale {
	background: #fbe9ec;
	color: var(--accent-2);
}
.mail-status {
	font-size: 0.9em;
	color: var(--ink-soft);
	margin: 0 0 1em 0;
}
.mail-note {
	font-size: 0.85em;
	color: var(--ink-soft);
	margin-left: 0.5em;
}
.empty {
	color: var(--ink-soft);
	font-style: italic;
}
.post-editor {
	background: #fff;
	border: 1px solid var(--rule);
	padding: 1em 1.2em;
	border-radius: 4px;
	margin-bottom: 1.5rem;
}
.post-editor-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 0.6em;
	font-size: 0.85em;
	color: var(--ink-soft);
}
.status-label {
	padding: 0.15em 0.55em;
	border-radius: 3px;
	background: var(--rule);
	text-transform: uppercase;
	font-size: 0.78em;
	letter-spacing: 0.04em;
}
.status-approved { background: #d5e8d4; color: #2a5e2a; }
.status-historical { background: #ddd; color: #555; }
.edit-form textarea,
.new-draft-form textarea {
	width: 100%;
	display: block;
	font-family: inherit;
	font-size: 0.95em;
	padding: 0.7em 0.85em;
	border: 1px solid var(--rule);
	border-radius: 4px;
	line-height: 1.5;
	resize: vertical;
	min-height: 6em;
	overflow: hidden;
}
.edit-form textarea:focus,
.new-draft-form textarea:focus {
	outline: 2px solid var(--accent);
	outline-offset: 1px;
	border-color: var(--accent);
}
.edit-form button,
.new-draft-form button { margin-top: 0.6em; }
.new-draft-hint {
	margin-top: 0.6em;
	font-size: 0.85em;
	color: var(--ink-soft);
}
.invite-hint {
	font-size: 0.9em;
	color: var(--ink-soft);
	margin: 0 0 1em 0;
	max-width: 36rem;
}
.invite-form {
	display: grid;
	gap: 0.4rem;
	max-width: 22rem;
}
.invite-form label {
	font-family: var(--font-ui);
	font-size: 0.85em;
	color: var(--ink-soft);
	margin-top: 0.4rem;
}
.invite-form input {
	padding: 0.5em 0.7em;
	font-size: 1em;
	border: 1px solid var(--rule);
	border-radius: 4px;
	background: #fff;
	color: inherit;
}
.invite-form input:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
.invite-form button { margin-top: 0.75rem; justify-self: start; }
.post-preview {
	margin-top: 0.8em;
	border-top: 1px solid var(--rule);
	padding-top: 0.6em;
}
.post-preview summary {
	cursor: pointer;
	color: var(--ink-soft);
	font-size: 0.9em;
}
.preview-body {
	margin-top: 0.6em;
	padding: 0.6em 0.8em;
	background: var(--bg);
	border-radius: 4px;
}
.approved-body {
	padding: 0.6em 0.85em;
	background: var(--bg);
	border-radius: 4px;
	margin: 0.5em 0 0.8em;
	line-height: 1.5;
}
.post-editor-actions {
	margin-top: 0.8em;
	display: flex;
	gap: 0.5rem;
}
.inline-form { display: inline; }
.post-editor-actions button { margin-top: 0; padding: 0.4em 1em; font-size: 0.9em; }
button.danger { background: var(--accent-2); }
/* Queued posts collapse to a one-line summary (date + status); reveal shows body + actions */
.queued-post summary {
	cursor: pointer;
	font-family: var(--font-ui);
	font-size: 0.85em;
	color: var(--ink-soft);
}
.queued-post summary .post-editor-label { margin-left: 0.5em; }
.queued-post[open] summary { margin-bottom: 0.6em; }
.users-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.9em;
}
.users-table th, .users-table td {
	padding: 0.5em 0.6em;
	border-bottom: 1px solid var(--rule);
	text-align: left;
}
.users-table .muted-row { background: var(--muted-bg); }
.users-table .actions { white-space: nowrap; }
.users-table .actions button {
	margin-top: 0;
	padding: 0.3em 0.7em;
	font-size: 0.85em;
}
/* Per-row "edit email" — collapsed by default so the row stays tidy */
.users-table .actions .edit-email { margin-top: 0.4em; white-space: normal; }
.users-table .actions .edit-email summary {
	cursor: pointer;
	font-family: var(--font-ui);
	font-size: 0.85em;
	color: var(--ink-soft);
}
.edit-email-form { margin-top: 0.4em; display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; }
.edit-email-form input[type="email"] {
	padding: 0.3em 0.5em;
	font-size: 0.9em;
	border: 1px solid var(--rule);
	border-radius: 4px;
}
.edit-email-form button { margin-top: 0; padding: 0.3em 0.7em; font-size: 0.85em; }
.admin-rss-url code {
	font-size: 0.95em;
	background: var(--bg);
	padding: 0.4em 0.6em;
	display: inline-block;
	border-radius: 3px;
}

/* Admin activity feed */
.event-list {
	list-style: none;
	padding: 0;
	margin: 1rem 0 0;
	font-size: 0.85em;
	line-height: 1.45;
	font-family: var(--font-ui);
}
.event-list li {
	display: grid;
	grid-template-columns: 6.5em 11em 1fr;
	gap: 0.6em;
	padding: 0.4em 0;
	border-bottom: 1px solid var(--rule);
	align-items: baseline;
}
.event-list li:last-child { border-bottom: none; }
.event-when { color: var(--ink-soft); white-space: nowrap; }
.event-type { color: var(--accent); font-size: 0.92em; }
.event-detail { word-break: break-word; color: var(--ink); }

/* Copy-to-clipboard button (wired up by app.js) */
.copy-target {
	font-size: 0.9em;
	background: var(--bg);
	padding: 0.2em 0.5em;
	border-radius: 3px;
	word-break: break-all;
}
.copy-btn {
	background: transparent;
	color: var(--ink-soft);
	border: none;
	padding: 0.15em 0.35em;
	margin: 0 0 0 0.25em;
	cursor: pointer;
	vertical-align: middle;
	border-radius: 3px;
	line-height: 1;
	transition: color 0.15s, background 0.15s;
}
.copy-btn:hover { color: var(--accent); background: var(--bg); }
.copy-btn svg { display: block; }
.copy-btn.copy-success { color: #2a5e2a; background: #d5e8d4; }

/* error pages */
.error-page .auth-container { text-align: center; }
.error-page h1 { margin-bottom: 1.5rem; }

/* mobile */
@media (max-width: 480px) {
	html, body { font-size: 16px; }
	.landing-container,
	.temenos-container,
	.essay-container,
	.privacy-container,
	.auth-container { margin: 1.5rem auto; }
	.site-header { margin-top: 1rem; }
}

/* Admin tab nav (Posts | People | System) */
.admin-tabs {
	max-width: var(--width);
	margin: 1rem auto 0;
	padding: 0 1.25rem;
	display: flex;
	gap: 1.25rem;
	font-family: var(--font-ui);
	font-size: 0.95em;
	border-bottom: 1px solid var(--rule);
}
.admin-tabs a {
	padding: 0.4em 0 0.6em;
	color: var(--ink-soft);
	text-decoration: none;
	border-bottom: 2px solid transparent;
	margin-bottom: -1px;
}
.admin-tabs a:hover { color: var(--accent); }
.admin-tabs a.active {
	color: var(--accent);
	font-weight: 600;
	border-bottom-color: var(--accent);
}

/* Reminder-settings (email-prefs) form: stack radios and selects */
.prefs-form { margin-bottom: 2.5rem; }   /* clear the "Emails we've sent you" section below the Save button */
.prefs-form fieldset {
	border: 1px solid var(--rule);
	border-radius: 4px;
	padding: 0.75rem 1.1rem 1rem;
	margin: 0 0 1.5rem;
}
.prefs-form legend {
	font-family: var(--font-ui);
	font-size: 0.9em;
	color: var(--ink-soft);
	padding: 0 0.4em;
}
.pref-option { margin: 0.5rem 0; }
.pref-field { margin: 0.5rem 0 1rem; }
.pref-field label { display: block; margin-bottom: 0.25rem; }
.prefs-form select { max-width: 22rem; }
.prefs-form .fineprint { margin-top: 0.75rem; }

/* "signed in as … Not you?" folded into the footer, on its own line */
.footer-whoami { margin-bottom: 0.5rem; }

/* Site announcement banner — centered on the content column, minimizes to a pill. */
.site-banner { box-sizing: border-box; max-width: var(--width); margin: 1rem auto 0; background: var(--muted-bg); border: 1px solid var(--rule); border-radius: 6px; padding: .6rem .9rem; display: flex; align-items: flex-start; gap: .75rem; font-family: var(--font-ui); }
.site-banner .banner-body { flex: 1; }
.site-banner .banner-body > :first-child { margin-top: 0; }
.site-banner .banner-body > :last-child { margin-bottom: 0; }
.site-banner .banner-controls { flex: 0 0 auto; display: flex; gap: .25rem; }
.site-banner .banner-controls button { margin: 0; padding: .05rem .5rem; background: transparent; color: var(--accent); border: 1px solid var(--rule); border-radius: 4px; font-size: 1.05rem; line-height: 1.35; cursor: pointer; }
.site-banner .banner-controls button:hover { color: var(--accent-2); background: var(--reply-bg); }
.site-banner .banner-max { display: none; margin: 0; padding: .1rem .4rem; background: transparent; color: var(--accent); border: 0; font: inherit; cursor: pointer; }
.site-banner .banner-max:hover { color: var(--accent-2); }
.site-banner.minimized { padding: .2rem .5rem; }
.site-banner.minimized .banner-body, .site-banner.minimized .banner-controls { display: none; }
.site-banner.minimized .banner-max { display: inline-block; }

/* Admin banner editor: full-width textarea, button on its own line below. */
/* Account page: each sign-in method is its own clearly-separated section. */
.account-section { margin-top: 2.25rem; padding-top: 1.25rem; border-top: 1px solid var(--rule); }
.account-section h2 { margin-top: 0; }
.account-section form { margin: .75rem 0 0; }
.account-section label { display: block; margin-bottom: .25rem; }
.account-section input[type="password"] { display: block; width: 100%; max-width: 22rem; box-sizing: border-box; margin-bottom: .6rem; }
.methods-summary { margin: .5rem 0 0; padding-left: 1.2rem; }
.methods-summary li { margin: .1rem 0; }
.passkey-list { list-style: none; padding: 0; margin: .75rem 0 0; }
.passkey-list li { display: flex; flex-wrap: wrap; align-items: baseline; gap: .4rem .75rem; padding: .5rem 0; border-top: 1px solid var(--rule); }
.passkey-list li:first-child { border-top: 0; }
.passkey-list .passkey-label { font-weight: 600; }
.passkey-list form { margin: 0; }

.banner-form label { display: block; margin-bottom: .35rem; }
.banner-form textarea { display: block; width: 100%; box-sizing: border-box; min-height: 7.5rem; margin-bottom: .85rem; font: inherit; }