/**
 * Today's Reading, Reading Plan Setup and a reader's plan. Reads the tokens `fwapp.css` sets from
 * the theme, so FerventWord → Style reaches these pages too.
 */

/* A link drawn as a button, for the one thing to do next. */
.fwapp-main .fwapp-button {
	display: inline-block;
	font-weight: 600;
	padding: 10px 16px;
	border-radius: 10px;
	border: 1px solid var( --fwapp-rule );
	text-decoration: none;
}

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

/* Today's Reading. */

.fwapp-today[hidden] { display: none; }

.fwapp-reading,
.fwapp-today-empty,
.fwapp-plan-end {
	background: var( --fwapp-surface );
	border: 1px solid var( --fwapp-rule );
	border-radius: var( --fwapp-radius );
	padding: 16px;
	margin: 0 0 14px;
}

.fwapp-reading p,
.fwapp-today-empty p,
.fwapp-plan-end p { margin: 0 0 6px; }

.fwapp-reading > :last-child,
.fwapp-today-empty > :last-child,
.fwapp-plan-end > :last-child { margin-bottom: 0; }

.fwapp-main .fwapp-reading-header {
	font-size: .8rem;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var( --fwapp-ink-muted );
	margin: 0 0 6px;
}

.fwapp-reading-passage {
	list-style: none;
	margin: 0 0 4px;
	padding: 0;
	font-size: 1.25rem;
	font-weight: 600;
}

.fwapp-reading-passage a { text-decoration-thickness: 2px; text-underline-offset: 3px; }

.fwapp-main a.fwapp-quiet-link { color: inherit; text-decoration: none; }

.fwapp-main a.fwapp-quiet-link:hover { text-decoration: underline; }

.fwapp-plan-end-actions { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; margin-top: 10px; }

.fwapp-plan-end-actions form { margin: 0; }

.fwapp-today-more { margin-top: 20px; }

/* Lists of plans. */

.fwapp-plan-list { list-style: none; margin: 0 0 12px; padding: 0; }

.fwapp-plan-list > li { border-top: 1px solid var( --fwapp-rule ); }

.fwapp-plan-list > li:last-child { border-bottom: 1px solid var( --fwapp-rule ); }

.fwapp-plan-list a,
.fwapp-plan-setup > summary {
	display: grid;
	gap: 2px;
	padding: 12px 0;
	text-decoration: none;
	color: inherit;
	cursor: pointer;
}

.fwapp-plan-setup > summary { list-style: none; position: relative; padding-right: 28px; }

.fwapp-plan-setup > summary::-webkit-details-marker { display: none; }

.fwapp-plan-setup > summary::after {
	content: "+";
	position: absolute;
	right: 4px;
	top: 50%;
	transform: translateY( -50% );
	font-size: 1.3rem;
	color: var( --fwapp-ink-muted );
}

.fwapp-plan-setup[open] > summary::after { content: "−"; }

.fwapp-plan-setup .fwapp-stack-form { margin: 0 0 16px; }

.fwapp-plan-title { font-weight: 600; color: var( --fwapp-accent ); }

.fwapp-plan-list .fwapp-muted { font-size: .9rem; }

/* The Repeat choice, as the app's segmented control. */

.fwapp-segmented { display: flex; gap: 6px; }

.fwapp-segmented label {
	flex: 1;
	position: relative;
	text-align: center;
	font-weight: 400;
	border: 1px solid var( --fwapp-rule );
	border-radius: 999px;
	padding: 7px 4px;
	min-height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}

/* The radio stays in the form and in the tab order; only its circle is hidden. */
.fwapp-segmented input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }

.fwapp-segmented label:has( input:checked ) { background: var( --fwapp-panel ); border-color: var( --fwapp-panel ); color: #F8F8F8; font-weight: 600; }

.fwapp-segmented label:has( input:focus-visible ) { outline: 3px solid var( --fwapp-accent ); outline-offset: 2px; }

/* Start This Plan, on a code's page. */

.fwapp-join .fwapp-stack-form { margin-top: 8px; }

/* An import waiting for the reader's word. */

.fwapp-import-preview {
	background: var( --fwapp-surface );
	border: 1px solid var( --fwapp-rule );
	border-radius: var( --fwapp-radius );
	padding: 16px;
	margin: 0 0 20px;
}

.fwapp-import-preview p { margin: 0 0 8px; }

.fwapp-import-preview .fwapp-error { margin: 0 0 10px; }

.fwapp-stack-form input[type="file"] { font: inherit; max-width: 100%; }

/* Choose Books. */

.fwapp-choose [hidden] { display: none; }

.fwapp-quick { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 6px; }

.fwapp-main .fwapp-quick button { padding: 7px 12px; font-size: .95rem; min-height: 44px; }

.fwapp-books { border: 1px solid var( --fwapp-rule ); border-radius: 10px; padding: 0 12px; }

.fwapp-books summary { cursor: pointer; padding: 10px 0; font-weight: 600; display: flex; justify-content: space-between; gap: 8px; }

.fwapp-books summary .fwapp-muted { font-weight: 400; }

.fwapp-books-head { font-weight: 600; margin: 8px 0 4px; color: var( --fwapp-ink-muted ); font-size: .9rem; }

.fwapp-book-grid { display: grid; grid-template-columns: repeat( auto-fill, minmax( 9.5rem, 1fr ) ); gap: 0 12px; margin: 0 0 10px; }

.fwapp-book-grid .fwapp-check { margin: 0; }

.fwapp-choose select[name="passages"] { justify-self: start; min-width: 5rem; }

/* `PlansView`'s Recommended mark, beside the plan it is on. */
.fwapp-recommended { display: inline-block; margin-left: .4em; padding: 1px 8px; border-radius: 999px; font-size: .75rem; font-weight: 600; vertical-align: middle; color: var( --fwapp-accent ); border: 1px solid var( --fwapp-accent ); }
.fwapp-plan-setup .fwapp-terms { display: grid; grid-template-columns: max-content 1fr; gap: 4px 14px; margin: 10px 0; }
.fwapp-plan-setup .fwapp-terms dt { font-weight: 600; }
.fwapp-plan-setup .fwapp-terms dd { margin: 0; }

/* Share This Plan (`PlanCodeShareSection`): a code is letters and numbers, shown as it will be printed. */
.fwapp-code-field { text-transform: uppercase; font-family: ui-monospace, "SF Mono", Menlo, monospace; letter-spacing: .06em; }
.fwapp-code-field::placeholder { text-transform: none; font-family: inherit; letter-spacing: normal; }
.fwapp-share [data-fwapp-share-on] { display: grid; gap: 6px; }
.fwapp-share [hidden] { display: none; }
#fwapp-share .fwapp-error p { margin: 0 0 4px; }
#fwapp-share .fwapp-terms { display: grid; grid-template-columns: max-content 1fr; gap: 4px 14px; margin: 0 0 10px; }
#fwapp-share .fwapp-terms dt { font-weight: 600; }
#fwapp-share .fwapp-terms dd { margin: 0; font-size: 1.15rem; }
#fwapp-share .fwapp-muted + .fwapp-muted,
.fwapp-share .fwapp-muted + .fwapp-muted { margin-top: 8px; }

/* The plan-made screen (`PlanMadeView`): the decision named, the plan, and the ways to take and share it. */
.fwapp-made-headline { margin-bottom: 12px; }
.fwapp-made-declaration { font-size: 1.1rem; line-height: 1.55; margin: 0 0 20px; }
.fwapp-made-plan,
.fwapp-made-code { display: grid; grid-template-columns: 1fr max-content; gap: 4px 14px; margin: 0 0 12px; }
.fwapp-made-plan dt { font-weight: 600; }
.fwapp-made-code dt { font-weight: 600; }
.fwapp-made-plan dd,
.fwapp-made-code dd { margin: 0; }
.fwapp-made-code dd { font-size: 1.15rem; }
.fwapp-made-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.fwapp-made-actions [hidden] { display: none; }
[data-fwapp-invite] textarea { font: inherit; padding: 10px 12px; border-radius: 10px; border: 1px solid var( --fwapp-rule ); background: var( --fwapp-surface ); color: var( --fwapp-ink ); width: 100%; box-sizing: border-box; }
[data-fwapp-invite] .fwapp-stack-form + .fwapp-stack-form { margin-top: 8px; }
[data-fwapp-invite] > .fwapp-terms,
[data-fwapp-invite] > .fwapp-error { margin-top: 16px; }
.fwapp-made-done { margin: 28px 0 8px; }

/* A plan day's passage: Open and Listen side by side (`PlanReadingView`'s row). */
.fwapp-passage-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.fwapp-main .fwapp-passage-actions .fwapp-listen { margin: 0; }