/**
 * The plugin's pages, drawn inside the theme (`FWAPP_Layout`).
 *
 * ⚠️ **THE THEME OWNS THE PAGE: BACKGROUND, TEXT COLOUR, FONTS, HEADER.** The Minimal Fervent Theme
 * publishes `--fervent-*` tokens for plugins to read, and these read them — so FerventWord →
 * Style's fonts and colours reach these pages too. Each token keeps the app's own value as a
 * fallback, for a theme that publishes none. The values are FerventWord's palette either way:
 * `ColorTheme.red` is the accent and the words of Christ.
 *
 * Mobile first: one column at phone width with a 16px gutter, widening to a reading measure.
 */

.fwapp {
	--fwapp-ink: var( --fervent-text, light-dark( #282528, #E0E0DF ) );
	--fwapp-ink-muted: light-dark( #595959, #A09F9F );
	--fwapp-accent: var( --fervent-accent, light-dark( #7F1518, #D98E8E ) );
	--fwapp-panel: light-dark( #7F1518, #430A0C );
	--fwapp-surface: var( --fervent-bg-elevated, light-dark( #FFFFFF, #302D30 ) );
	--fwapp-page: var( --fervent-bg, light-dark( #F5F3F1, #252225 ) );
	--fwapp-rule: var( --fervent-border, light-dark( rgba( 0, 0, 0, .12 ), rgba( 224, 224, 223, .16 ) ) );
	--fwapp-radius: 14px;
}

.fwapp-main * { box-sizing: border-box; }

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect( 0 0 0 0 );
	white-space: nowrap;
}

.fwapp-main a { color: var( --fwapp-accent ); }

.fwapp-main {
	max-width: 40rem;
	margin: 0 auto;
	padding: 24px 16px 48px;
	color: var( --fwapp-ink );
}

.fwapp-main h1 {
	font-size: 1.75rem;
	line-height: 1.2;
	margin: 0 0 12px;
	overflow-wrap: anywhere;
}

.fwapp-main h2 { font-size: 1.15rem; margin: 0 0 8px; }

.fwapp-eyebrow {
	color: var( --fwapp-ink-muted );
	font-size: .9rem;
	margin: 0 0 4px;
}

.fwapp-code {
	font-family: ui-monospace, "SF Mono", Menlo, monospace;
	letter-spacing: .06em;
	color: var( --fwapp-ink );
}

.fwapp-facts {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	list-style: none;
	margin: 0 0 24px;
	padding: 0;
}

.fwapp-facts li {
	border: 1px solid var( --fwapp-rule );
	border-radius: 999px;
	padding: 2px 12px;
	font-size: .9rem;
	color: var( --fwapp-ink-muted );
}

.fwapp-muted { color: var( --fwapp-ink-muted ); margin: 0; }

/* Today, then the days ahead. The script marks the visitor's own today; without it, the server's. */

.fwapp-days {
	list-style: none;
	margin: 0 0 32px;
	padding: 0;
	background: var( --fwapp-surface );
	border: 1px solid var( --fwapp-rule );
	border-radius: var( --fwapp-radius );
	overflow: hidden;
}

.fwapp-day {
	padding: 12px 16px;
	border-top: 1px solid var( --fwapp-rule );
}

.fwapp-day.is-past { display: none; }

.fwapp-day.is-today { border-top: 0; padding: 20px 16px; }

.fwapp-day.is-today + .fwapp-day { border-top: 4px solid var( --fwapp-rule ); }

/* The day labels are headings for structure, but they are labels for reading, not titles: the
   theme's display face (Trajan) belongs to the plan's name, so these keep the body font. */
.fwapp-day-head {
	font-family: var( --fervent-font-body, inherit );
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0 10px;
	font-size: 1rem;
	font-weight: 600;
	margin: 0 0 4px;
}

.fwapp-today-label { display: none; color: var( --fwapp-accent ); }

.fwapp-day.is-today .fwapp-today-label { display: inline; }

.fwapp-day.is-today .fwapp-day-head { font-size: 1.15rem; }

.fwapp-day-number {
	font-weight: 400;
	color: var( --fwapp-ink-muted );
	font-size: .9rem;
}

.fwapp-passages {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 4px 16px;
}

.fwapp-day.is-today .fwapp-passages { font-size: 1.25rem; font-weight: 600; }

.fwapp-day.is-today .fwapp-passages a { text-decoration-thickness: 2px; text-underline-offset: 3px; }

/* Adding it in the app. */

.fwapp-join {
	margin: 0 0 32px;
}

.fwapp-join ol { padding-left: 1.25rem; margin: 0; }

.fwapp-join li { margin: 0 0 6px; }

/* The whole schedule. */

.fwapp-schedule {
	background: var( --fwapp-surface );
	border: 1px solid var( --fwapp-rule );
	border-radius: var( --fwapp-radius );
	margin: 0 0 24px;
}

.fwapp-schedule summary {
	cursor: pointer;
	font-weight: 600;
	padding: 14px 16px;
}

.fwapp-schedule table {
	width: 100%;
	border-collapse: collapse;
	font-size: .95rem;
	font-variant-numeric: tabular-nums;
}

.fwapp-schedule th,
.fwapp-schedule td {
	text-align: left;
	padding: 6px 16px;
	border-top: 1px solid var( --fwapp-rule );
	vertical-align: top;
}

.fwapp-schedule td:last-child { overflow-wrap: anywhere; }

.fwapp-schedule td:not( :last-child ) { white-space: nowrap; }

.fwapp-schedule th { color: var( --fwapp-ink-muted ); font-weight: 600; font-size: .85rem; }

.fwapp-schedule tr[aria-current="date"] td { color: var( --fwapp-accent ); font-weight: 600; }

.fwapp-note { color: var( --fwapp-ink-muted ); font-size: .9rem; }

/* The code form. */

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

.fwapp-form-row { display: flex; gap: 8px; margin: 0 0 10px; }

.fwapp-form input {
	flex: 1;
	min-width: 0;
	font: inherit;
	font-family: ui-monospace, "SF Mono", Menlo, monospace;
	letter-spacing: .06em;
	text-transform: uppercase;
	padding: 10px 12px;
	border: 1px solid var( --fwapp-rule );
	border-radius: 10px;
	background: var( --fwapp-surface );
	color: var( --fwapp-ink );
}

.fwapp-form button {
	font: inherit;
	font-weight: 600;
	padding: 10px 16px;
	border: 0;
	border-radius: 10px;
	background: var( --fwapp-panel );
	color: #F8F8F8;
	cursor: pointer;
}

.fwapp-error {
	border-left: 4px solid var( --fwapp-accent );
	padding: 8px 12px;
	background: var( --fwapp-surface );
	border-radius: 0 10px 10px 0;
}

.fwapp-main :focus-visible { outline: 3px solid var( --fwapp-accent ); outline-offset: 2px; }

/* Accounts. */

.fwapp-main .fwapp-good,
.fwapp-main .fwapp-error { margin: 0 0 20px; }

.fwapp-main form + p { margin-top: 14px; }

.fwapp-good {
	border-left: 4px solid light-dark( #2D5126, #86A87E );
	padding: 8px 12px;
	background: var( --fwapp-surface );
	border-radius: 0 10px 10px 0;
}

.fwapp-section { border-top: 1px solid var( --fwapp-rule ); margin: 28px 0 0; padding: 20px 0 0; }

.fwapp-main button {
	font: inherit;
	font-weight: 600;
	padding: 10px 16px;
	border-radius: 10px;
	border: 1px solid var( --fwapp-rule );
	background: var( --fwapp-surface );
	color: var( --fwapp-ink );
	cursor: pointer;
}

.fwapp-main .fwapp-primary,
.fwapp-form button { background: var( --fwapp-panel ); border-color: var( --fwapp-panel ); color: #F8F8F8; }

.fwapp-main .fwapp-destructive { color: light-dark( #A3150F, #F28B82 ); border-color: currentColor; background: transparent; }

/* A whole row to tap, at least 44px tall, as the app's rows are (app §14). */
.fwapp-check { display: flex; gap: 8px; align-items: center; min-height: 44px; margin: 0 0 4px; }

.fwapp-form .fwapp-email { text-transform: none; letter-spacing: 0; font-family: inherit; }

/* The honeypot: out of sight and out of the tab order, but still in the form a bot fills. */
.fwapp-hp { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* Stacked forms: Your Highlights & Notes and the plan pages. */

.fwapp-stack-form { display: grid; gap: 6px; margin: 16px 0 0; }

.fwapp-stack-form label { font-weight: 600; }

.fwapp-stack-form input[type="text"],
.fwapp-stack-form input[type="date"],
.fwapp-stack-form input[type="time"],
.fwapp-stack-form input[type="number"],
.fwapp-stack-form select,
.fwapp-stack-form textarea {
	font: inherit;
	min-width: 0;
	max-width: 100%;
	padding: 10px 12px;
	border-radius: 10px;
	border: 1px solid var( --fwapp-rule );
	background: var( --fwapp-surface );
	color: var( --fwapp-ink );
}

.fwapp-stack-form button { justify-self: start; margin-top: 6px; }

.fwapp-stack-form .fwapp-form-row button { justify-self: auto; margin-top: 0; }

.fwapp-stack-form .fwapp-check { font-weight: 400; margin: 0; }

.fwapp-stack-form fieldset { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; gap: 6px; }

.fwapp-stack-form legend { font-weight: 600; padding: 0; margin: 0 0 6px; }

.fwapp-danger { border-top: 1px dashed var( --fwapp-rule ); padding-top: 14px; }

.fwapp-inline-form { margin: 0 0 8px; }

.fwapp-account-links { padding-left: 1.2em; margin: 16px 0 0; }

.fwapp-account-links li { margin: 0 0 6px; }

/* A sentence that comes and goes: "Kept on this device…" */
.fwapp-toast { position: fixed; left: 50%; bottom: calc( 24px + env( safe-area-inset-bottom ) ); transform: translateX( -50% ); z-index: 1001; max-width: calc( 100% - 32px ); margin: 0; padding: 10px 14px; border-radius: 10px; background: var( --fwapp-ink, #282528 ); color: var( --fwapp-page, #F5F3F1 ); font-size: .9rem; box-shadow: 0 4px 16px rgba( 0, 0, 0, .2 ); }

.fwapp-offline-list a { padding: 10px 0; }

/* A file field's button is as tall as every other control (app §14's 44px). */
.fwapp-main input[type="file"] { min-height: 44px; padding: 8px 0; box-sizing: border-box; }

/* Sign in with Apple and Google, each in its brand's own button (Apple's and Google's guidelines). */
.fwapp-providers { display: grid; gap: 10px; margin: 0 0 18px; max-width: 360px; }
.fwapp-main .fwapp-provider { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 44px; font-weight: 600; border-radius: 10px; }
.fwapp-main .fwapp-provider-apple { background: light-dark( #000000, #FFFFFF ); color: light-dark( #FFFFFF, #000000 ); border-color: light-dark( #000000, #FFFFFF ); }
.fwapp-main .fwapp-provider-google { background: light-dark( #FFFFFF, #131314 ); color: light-dark( #1F1F1F, #E3E3E3 ); border-color: light-dark( #747775, #8E918F ); }