/*
 * SephardicU Tehillim — Builder + Reader styles.
 *
 * Design tokens below are SephardicU's OWN confirmed values (screenshot +
 * direct confirmation), not invented for this feature. Everything is
 * still exposed as an overridable CSS custom property
 * (--su-tehillim-accent etc.) so the site owner can adjust from a theme
 * stylesheet without editing this file, but the DEFAULTS now match the
 * live site rather than a generic placeholder palette:
 *   bg #FECD8B, text #001317, Rubik, 20px radius, all-caps headings,
 *   pill buttons, Times New Roman Hebrew (min 20px).
 *
 * Scoped entirely under .su-tehillim-* classes so nothing here leaks
 * into the rest of SephardicU.com.
 */

/* Root cause of a real overflow bug: elements with both padding AND an
   explicit/assigned width (grid tracks, the app container, etc.)
   render WIDER than intended under the browser default (content-box),
   since padding is added on top of the specified width rather than
   eating into it. WordPress/theme global stylesheets don't reliably
   set box-sizing: border-box for us, so this plugin can't assume it.
   Scoped to every Tehillim component rather than left to chance. */
.su-tehillim-builder,
.su-tehillim-builder *,
.su-tehillim-chapter,
.su-tehillim-chapter *,
.su-tehillim-browse,
.su-tehillim-browse *,
.su-tehillim-index,
.su-tehillim-index *,
.su-tehillim-finder,
.su-tehillim-finder *,
.su-tehillim-app,
.su-tehillim-app * {
	box-sizing: border-box;
}

/* IMPORTANT -- DO NOT REMOVE, even during a future rewrite of this file.
   Any element in these components that uses the native `hidden`
   attribute for JS-driven show/hide (e.g. .su-tehillim-name-suggestion)
   must actually be hidden when that attribute is present, regardless of
   whatever `display` value its own class rule sets for its VISIBLE
   state. Without this, a plain `display: flex/grid/block` rule (needed
   to show the element at all) silently wins the cascade over the
   browser's native hidden-attribute default, and the element stays
   visible no matter what JS does to the attribute. This exact bug has
   recurred more than once in this project after markup/CSS rewrites --
   this rule is the permanent fix, not a one-off patch. */
.su-tehillim-builder [hidden],
.su-tehillim-chapter [hidden],
.su-tehillim-finder [hidden],
.su-tehillim-app [hidden] {
	display: none !important;
}

.su-tehillim-builder,
.su-tehillim-chapter,
.su-tehillim-index,
.su-tehillim-browse,
.su-tehillim-finder {
	--su-gold: var(--su-tehillim-accent, #fecd8b);
	/* Darker/richer gold specifically for option/selection controls (Fix 2).
	   Derived from the site's pale #FECD8B, darkened enough that white text
	   on it clears WCAG AA contrast (~6.2:1) at any button text size --
	   the pale #FECD8B itself does not have enough contrast with white to
	   use safely for text-bearing buttons. */
	--su-tehillim-button-gold: var(--su-tehillim-button-gold-override, #7a5c12);
	--su-dark: var(--su-tehillim-dark, #001317);
	--su-text: var(--su-tehillim-text, #001317);
	--su-text-on-dark: var(--su-tehillim-text-on-dark, #fff6e6);
	--su-surface: var(--su-tehillim-surface, #ffffff);
	--su-border: var(--su-tehillim-border, rgba(0, 19, 23, 0.15));
	--su-radius: var(--su-tehillim-border-radius, 20px);
	--su-radius-pill: 999px;
	--su-font: var(--su-tehillim-font, "Rubik", -apple-system, BlinkMacSystemFont, sans-serif);
	--su-hebrew-font: var(--su-tehillim-hebrew-font, "Times New Roman", Times, serif);
	--su-hebrew-min-size: 20px;
	/* Fix 1: SephardicU's own confirmed container system -- one value,
	   used consistently, not a Tehillim-specific width. */
	--su-container-max: 1125px;
	--su-container-width: 95%;
	/* Fix 3: ~80px fixed header + breathing room. Applied ONCE at each
	   outer container below, never compounded on nested children. */
	--su-header-clearance: 100px;

	/* Gemini-reference cream: a muted warm-neutral surface, used for
	   purpose cards and the two personalization panels -- distinct from
	   pure white (--su-surface, used for the app container itself and
	   for a SELECTED variant) and from the gold-derived tints below
	   (kept for narrower, specific accents only in this version, not as
	   the dominant card color). */
	--su-cream: var(--su-tehillim-cream, #f5f2ea);

	/* Derived tonal tints of the SAME brand gold (#FECD8B) -- NOT a new
	   palette. Computed as a linear blend toward white (white*(1-t) +
	   gold*t), used the way a fuller color scale gives a design more
	   depth on a white background: subtle card backgrounds, badge
	   fills, hover states. No new brand color is introduced anywhere
	   in this file -- every one of these is a lighter version of the
	   one gold already in use.
	     --su-gold-wash  : t=0.10 -- barely-there card background
	     --su-gold-tint  : t=0.22 -- badge/footer fills, subtle borders */
	--su-gold-wash: var(--su-tehillim-gold-wash, #fffaf3);
	--su-gold-tint: var(--su-tehillim-gold-tint, #fdecd3);
	/* Warm off-white/ivory for the Builder's own app-envelope background
	   (Section 4) -- distinct from --su-surface (pure white, used for
	   cards/panels sitting ON this ivory) and from the page's own pale
	   gold background. A restrained neutral, not another named color. */
	--su-ivory: var(--su-tehillim-ivory, #fbf8f3);

	font-family: var(--su-font);
	color: var(--su-text);
}

.su-tehillim-builder h1,
.su-tehillim-builder h2,
.su-tehillim-builder h3,
.su-tehillim-chapter h1,
.su-tehillim-chapter h2,
.su-tehillim-chapter h3,
.su-tehillim-index h1,
.su-tehillim-index h2,
.su-tehillim-browse h1,
.su-tehillim-browse h2,
.su-tehillim-browse h3 {
	font-family: var(--su-font);
	text-transform: uppercase;
	letter-spacing: 0.02em;
	font-weight: 700;
}

/* Shared pill-button look for primary ACTIONS (Generate, Share, alternate
   readings, Copy/Print/font-size) -- these already had explicit,
   sufficient-contrast colors (dark text on pale gold) and are unaffected
   by Fix 2, which targets SELECTION controls specifically (see below). */
.su-tehillim-btn,
.su-tehillim-builder__generate,
.su-tehillim-name-suggestion button,
.su-tehillim-share,
.su-tehillim-chapter__controls button:not([data-show]) {
	font-family: var(--su-font);
	text-transform: uppercase;
	letter-spacing: 0.02em;
	font-weight: 700;
	font-size: 0.85rem;
	color: var(--su-dark);
	background: var(--su-gold);
	border: none;
	border-radius: var(--su-radius-pill);
	padding: 0.65rem 1.4rem;
	cursor: pointer;
	transition: transform 120ms ease, box-shadow 120ms ease;
}

.su-tehillim-share {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
}

.su-tehillim-btn:hover,
.su-tehillim-builder__generate:hover:not(:disabled),
.su-tehillim-share:hover,
.su-tehillim-chapter__controls button:not([data-show]):hover {
	box-shadow: 0 3px 10px rgba(0, 19, 23, 0.18);
}

.su-tehillim-btn:focus-visible,
.su-tehillim-builder__generate:focus-visible,
.su-tehillim-share:focus-visible,
.su-tehillim-chapter__controls button:not([data-show]):focus-visible {
	outline: 3px solid #000;
	outline-offset: 2px;
}

.su-tehillim-btn--secondary {
	background: transparent;
	color: var(--su-dark);
	border: 2px solid var(--su-dark);
}

/* -------------------------------------------------------------------
   Fix 2: option/selection controls (purpose cards, variant cards, the
   Hebrew/English/Both reading-mode toggle). These are the elements that
   had the white-background/white-text bug -- their background was set
   explicitly but their TEXT color was only ever inherited, so any
   higher-priority same-element rule elsewhere on the site (a common
   theme/page-builder pattern like `button { color: #fff; }`) could -- and
   apparently did -- override the inherited dark text while leaving the
   pale background in place. Every rule below now sets color explicitly,
   which is both the fix or the bug's cause and the correct approach on
   its own merits.
   ------------------------------------------------------------------- */

.su-tehillim-chapter__controls button[data-show] {
	color: #ffffff;
	background: var(--su-tehillim-button-gold);
	border: 2px solid transparent;
	border-radius: var(--su-radius-pill);
	font-family: var(--su-font);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	cursor: pointer;
	transition: background 120ms ease, color 120ms ease;
}

.su-tehillim-chapter__controls button[data-show]:hover,
.su-tehillim-chapter__controls button[data-show][aria-pressed="true"] {
	background: var(--su-dark);
	color: var(--su-gold);
}

.su-tehillim-chapter__controls button[data-show]:focus-visible {
	outline: 3px solid #000;
	outline-offset: 2px;
	box-shadow: 0 0 0 5px #fff;
}

/* Variant ("reading pace") cards -- matched to the Screen 2 reference
   image: cream unselected, white with a thin dark border when selected
   -- NOT the gold-fill treatment used elsewhere on the site. */
.su-tehillim-variant-card {
	display: flex;
	align-items: flex-start;
	gap: 0.7rem;
	width: 100% !important;
	max-width: 100% !important;
	box-sizing: border-box !important;
	white-space: normal !important;
	text-transform: none !important;
	text-align: start;
	color: var(--su-text) !important;
	background: #fff !important;
	border: 1.5px solid var(--su-border) !important;
	border-radius: 14px;
	padding: 1rem 1.1rem;
	font-family: var(--su-font);
	font-weight: 400;
	cursor: pointer;
	transition: border-color 150ms ease, background 150ms ease;
}

.su-tehillim-variant-card:hover {
	border-color: var(--su-active-page-gold, #c3a262) !important;
	background: rgba(195, 162, 98, 0.08) !important;
}

.su-tehillim-variant-card[aria-checked="true"] {
	background: var(--su-surface) !important;
	border-color: var(--su-dark) !important;
}

.su-tehillim-variant-card:focus-visible {
	outline: 3px solid #000;
	outline-offset: 2px;
}

.su-tehillim-variant-card__box {
	flex-shrink: 0;
	margin-top: 0.15rem;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 1.1rem;
	height: 1.1rem;
	border: 1.5px solid var(--su-border);
	border-radius: 50%;
	background: var(--su-surface);
	transition: border-color 150ms ease;
}

.su-tehillim-variant-card__box::after {
	content: '';
	width: 0.55rem;
	height: 0.55rem;
	border-radius: 50%;
	background: var(--su-dark);
	transform: scale(0);
	transition: transform 150ms ease;
}

.su-tehillim-variant-card[aria-checked="true"] .su-tehillim-variant-card__box {
	border-color: var(--su-dark);
}

.su-tehillim-variant-card[aria-checked="true"] .su-tehillim-variant-card__box::after {
	transform: scale(1);
}

.su-tehillim-variant-card__text {
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
	min-width: 0;
	overflow-wrap: break-word !important;
}

.su-tehillim-variant-card__label {
	font-size: 0.82rem;
	font-weight: 600;
	color: var(--su-dark);
	text-transform: none !important;
	white-space: normal !important;
}

.su-tehillim-variant-card__desc {
	font-size: 0.72rem;
	font-weight: 400;
	color: var(--su-dark);
	opacity: 0.65;
	line-height: 1.45;
	text-transform: none !important;
	white-space: normal !important;
}

/* The non-interactive display used when a purpose has exactly one
   reading option -- looks like a selected variant card (communicating
   "this is what you'll read and how long it takes"), but isn't
   clickable, since there's nothing to choose. */
.su-tehillim-variant-card--single {
	cursor: default;
}

/* Purpose cards -- matched to the Gemini reference screenshots: a
   muted cream surface (NOT white, not gold-filled), black Rubik text,
   the actual database icon shown plainly (no circular wrapper), and a
   plain "Select ->" text link at the bottom rather than a button-like
   affordance. Text color is EXPLICITLY set here (not inherited) --
   this is what actually fixed the original white-on-white bug, and
   that fix survives regardless of which visual treatment sits on top
   of it. Selected state (shown only if the visitor returns to this
   screen via "Change Purpose") uses a thin dark border ring, matching
   the same selected-state language used for the reading-length choice
   on Screen 2 -- not a solid fill.
*/
.su-tehillim-purpose-card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	min-width: 0; /* Grid items default to min-width:auto -- without this, long unbreakable content can force the card wider than its 1fr track regardless of box-sizing. */
	max-width: 100% !important; /* Defensive: guarantees the card can never exceed its grid track width regardless of any external interference. */
	color: var(--su-text);
	background: var(--su-surface);
	border: 1.5px solid var(--su-border);
	border-radius: 16px;
	padding: 1.5rem;
	font-family: var(--su-font);
	text-align: start;
	cursor: pointer;
	transition: border-color 200ms ease, transform 200ms ease, box-shadow 200ms ease;
}

/* NOTE: align-items was previously "flex-start", which in a column flex
   container lets each child (icon, title, description, "Select ->")
   size itself to its OWN content width rather than stretching to the
   card's full width -- so a long description just grew wider instead
   of wrapping, extending past the card. The default (stretch, i.e. not
   overriding align-items at all) makes every child the card's actual
   available width, which is what makes wrapping work at all. */

.su-tehillim-purpose-card__header {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	width: 100%;
	min-width: 0;
}

.su-tehillim-purpose-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 20px rgba(0, 19, 23, 0.06);
}

.su-tehillim-purpose-card[aria-checked="true"] {
	border-color: var(--su-dark);
	background: var(--su-surface);
}

.su-tehillim-purpose-card:focus-visible {
	outline: 3px solid #000;
	outline-offset: 2px;
}

.su-tehillim-purpose-card__icon {
	font-size: 1.4rem;
	line-height: 1;
	margin-bottom: 0.2rem;
}

/* -------------------------------------------------------------------
   Builder

   ARCHITECTURE NOTE: this redesign moves the Builder from a persistent
   side-by-side layout (narrow left controls column + sticky right
   result column) to a single-column, full-width vertical flow: purpose
   grid, then the two-panel personalization step, then the result --
   all stacked, all at full container width. Two things drove this:
   (1) a real 2-column purpose-card grid needs more width per card than
   a ~280-400px column allows, and (2) the spec explicitly asks for the
   reading to "appear naturally below the Builder controls" and "become
   the visual focal point," which a permanently-visible side panel
   works against. The DOM order (left content, then right/result) is
   UNCHANGED -- only the grid-column count changed, which is why this
   is a CSS-only change with no JS/PHP logic touched. The `position:
   sticky` behavior on the result panel is removed as a direct
   consequence: it only made sense when the result sat beside
   scrolling content, not below it.
   ------------------------------------------------------------------- */

.su-tehillim-builder {
	display: block;
	width: var(--su-container-width);
	max-width: var(--su-container-max);
	margin-left: auto;
	margin-right: auto;
	padding-top: var(--su-header-clearance);
}

.su-tehillim-builder__left {
	/* The warm ivory "app envelope" (spec Section 4): a background
	   distinct from both pure white (card/panel surfaces) and the
	   page's own pale gold, so the feature visually establishes
	   itself without becoming a heavy boxed "dashboard." */
	background: var(--su-ivory);
	border: 1px solid var(--su-border);
	border-radius: 22px;
	padding: clamp(1.75rem, 3vw, 3rem);
}

.su-tehillim-builder__right {
	margin-top: 2rem;
}

.su-tehillim-builder__app-header {
	margin-bottom: 1.25rem;
}

.su-tehillim-builder__app-title {
	font-family: var(--su-font);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	font-size: 0.85rem;
	color: var(--su-tehillim-button-gold);
	margin: 0 0 0.2rem;
}

.su-tehillim-builder__app-tagline {
	font-size: 0.95rem;
	opacity: 0.75;
	margin: 0;
}

.su-tehillim-builder__heading {
	font-size: 1.4rem;
	margin-bottom: 1.1rem;
}

/* Step-progress indicator: reflects real state (see builder.js
   setProgressStep()) -- never advances ahead of what's actually
   happened in the flow. */
.su-tehillim-builder__progress {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding-bottom: 0.85rem;
	margin-bottom: 1.1rem;
	border-bottom: 2px solid var(--su-border);
}

.su-tehillim-builder__progress-label {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.8rem;
	font-weight: 600;
}

.su-tehillim-builder__progress-badge {
	flex-shrink: 0;
	width: 1.4rem;
	height: 1.4rem;
	border-radius: 50%;
	background: var(--su-dark);
	color: var(--su-gold);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 0.72rem;
	font-weight: 700;
}

.su-tehillim-builder__progress-dots {
	display: flex;
	align-items: center;
	gap: 0.35rem;
}

.su-tehillim-builder__progress-dot {
	height: 0.4rem;
	width: 0.4rem;
	border-radius: 50%;
	background: var(--su-border);
	transition: width 200ms ease, background 200ms ease;
}

.su-tehillim-builder__progress-dot.is-active {
	width: 1.4rem;
	background: var(--su-dark);
}

.su-tehillim-builder__purposes {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 22px;
}

@media (max-width: 700px) {
	.su-tehillim-builder__purposes {
		grid-template-columns: 1fr;
	}
}

.su-tehillim-purpose-card__label {
	min-width: 0;
	font-size: 1.1rem;
	font-weight: 700;
	text-transform: none;
	letter-spacing: normal;
	overflow-wrap: break-word;
}

.su-tehillim-app__purposes .su-tehillim-purpose-card__intro {
	display: block;
	width: 100% !important;
	max-width: 100% !important;
	white-space: normal !important;
	overflow-wrap: break-word !important;
	word-break: break-word;
	hyphens: auto;
	font-size: 0.85rem;
	font-weight: 400;
	text-transform: none;
	letter-spacing: normal;
	opacity: 0.65;
	line-height: 1.55;
}

.su-tehillim-purpose-card__select {
	margin-top: auto;
	padding-top: 0.85rem;
	border-top: 1px solid var(--su-border);
	font-size: 0.85rem;
	font-weight: 600;
	text-transform: none;
	letter-spacing: normal;
	color: var(--su-tehillim-button-gold);
}

.su-tehillim-builder__library-lead {
	margin-top: 1.5rem;
	font-size: 0.85rem;
	opacity: 0.7;
	text-align: center;
}

.su-tehillim-builder__library-link {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.2rem;
	margin-top: 0.5rem;
	padding: 0.75rem;
	text-align: center;
	text-decoration: none;
	color: var(--su-text);
	border: 2px dashed var(--su-border);
	border-radius: var(--su-radius);
	font-family: var(--su-font);
	font-size: 0.9rem;
}

.su-tehillim-builder__library-link:hover {
	border-color: var(--su-dark);
	border-style: solid;
}

.su-tehillim-builder__library-link__label {
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.02em;
}

.su-tehillim-builder__library-link__intro {
	font-size: 0.8rem;
	opacity: 0.75;
	font-weight: 400;
	text-transform: none;
}

/* Two-panel personalization (Section 7 of the refinement spec): name/
   mother's name on the left, reading length on the right, side by side
   on desktop, stacking on mobile. Both children keep the exact same
   IDs/classes/hidden-attribute behavior as before -- only their shared
   wrapper and layout changed, so builder.js's existing selectors and
   the automatic-update flow are completely untouched. */
.su-tehillim-builder__step2 {
	margin-top: 2rem;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1.75rem;
}

@media (max-width: 860px) {
	.su-tehillim-builder__step2 {
		grid-template-columns: 1fr;
		gap: 1.5rem;
	}
}

.su-tehillim-builder__time-step,
.su-tehillim-builder__personalization {
	margin-top: 0;
	background: var(--su-cream);
	border: 1px solid var(--su-border);
	border-radius: 18px;
	padding: 1.5rem;
}

.su-tehillim-builder__who {
	font-size: 1rem;
	margin: 0 0 0.5rem;
}

.su-tehillim-builder__variants {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.su-tehillim-builder__optional-note {
	font-size: 0.85rem;
	opacity: 0.75;
	margin-bottom: 0.85rem;
}

.su-tehillim-builder label {
	display: block;
	font-family: var(--su-font);
	font-weight: 600;
	font-size: 0.85rem;
	text-transform: uppercase;
	letter-spacing: 0.01em;
	margin-bottom: 0.3rem;
}

.su-tehillim-builder input[type="text"] {
	width: 100%;
	padding: 0.7rem 0.9rem;
	border: 2px solid var(--su-border);
	border-radius: var(--su-radius);
	margin-bottom: 0.85rem;
	font-family: var(--su-font);
	font-size: 1rem;
	background: var(--su-surface);
	color: var(--su-text);
}

.su-tehillim-builder input[type="text"]:focus-visible {
	outline: 2px solid var(--su-dark);
	outline-offset: 1px;
	border-color: var(--su-dark);
}

.su-tehillim-name-suggestion {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	font-size: 1.15rem;
	margin: -0.5rem 0 0.85rem;
}

.su-tehillim-name-suggestion__text {
	font-family: var(--su-hebrew-font);
	font-size: max(1.15rem, var(--su-hebrew-min-size));
	direction: rtl;
}

.su-tehillim-name-suggestion button {
	padding: 0.3rem 0.85rem;
	font-size: 0.7rem;
}

.su-tehillim-gender-field {
	display: flex;
	align-items: center;
	gap: 0.85rem;
	margin-bottom: 0.85rem;
	font-size: 0.9rem;
	text-transform: none;
}

.su-tehillim-gender-field label {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	text-transform: none;
	font-weight: 400;
}

.su-tehillim-builder__generate {
	/* This is the OLD standalone [sephardicu_tehillim_builder] shortcode's
	   own button, not used by [sephardicu_tehillim_finder] anymore (see
	   .su-tehillim-builder__generate-visible below for that). Left
	   hidden here since that legacy shortcode's own automatic-update
	   flow still doesn't use a button. */
	display: none;
}

/* The Finder app's actual "Generate Curated Reading" button -- the
   single, explicit trigger for Screen 2 -> Screen 3, matching the
   reference mockup exactly. Always enabled: a reading is being kept
   fresh in the background from the moment a purpose is chosen, so
   there's never a moment where clicking this would have nothing to
   show. */
.su-tehillim-builder__generate-visible {
	display: block;
	width: 100%;
	margin-top: 2rem;
	padding: 1.1rem;
	background: var(--su-tehillim-button-gold);
	color: #fff;
	border: none;
	border-radius: 14px;
	font-family: var(--su-font);
	font-weight: 700;
	font-size: 0.9rem;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	cursor: pointer;
	transition: opacity 150ms ease;
}

.su-tehillim-builder__generate-visible:hover {
	background: #5f4710 !important;
	opacity: 1;
}

.su-tehillim-builder__generate-visible:focus-visible {
	outline: 3px solid #000;
	outline-offset: 2px;
}

.su-tehillim-builder__right {
	background: var(--su-surface);
	border-radius: var(--su-radius);
	padding: 2rem;
}

/* NOTE: this panel previously used `position: sticky` to stay visible
   alongside the controls in a side-by-side layout. That layout no
   longer exists (see the architecture note on .su-tehillim-builder
   above) -- the result now sits full-width BELOW the controls, so
   sticking it made no sense and has been removed. */

.su-tehillim-builder__placeholder {
	opacity: 0.6;
}

/* This specific gold (#C3A262) was given as an exact, precise hex for
   the active chapter-button fill and its hover tint -- distinct from
   both existing brand gold tokens (--su-gold, the pale page
   background; --su-tehillim-button-gold, the darker secondary-button
   gold). Introduced as its own named token rather than silently
   substituted, since it was specified this precisely on purpose. */
.su-tehillim-progress-navigator {
	--su-active-page-gold: #c3a262;
	margin: 1.25rem 0;
}

.su-tehillim-progress-navigator__context {
	font-size: 0.78rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: var(--su-dark);
	opacity: 0.6;
	margin: 0 0 0.6rem;
}

/* Single row: page counter (left, fixed) -- chapter boxes (flexible
   middle, wraps onto its own centered line if there isn't room) --
   Read Next (right, fixed). */
/* Grid, not flex: with flex-wrap, an overflowing middle item drags
   everything after it (Read Next) down to the next line too. A grid's
   columns don't wrap that way -- the page counter and Read Next stay
   permanently pinned to their columns on the same row, while the
   middle column (the chapter rail) is free to grow taller and wrap
   its own contents internally when there isn't room, with the other
   two columns simply staying aligned to its first line. */
.su-tehillim-pagination-bar {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: start;
	gap: 0.85rem;
	margin: 0 0 1rem;
}

@media (max-width: 480px) {
	/* Even a fixed-column grid can get cramped if the viewport itself
	   is narrower than the page-counter + Read Next text combined --
	   stacks cleanly rather than clipping/overlapping on very small
	   phones. */
	.su-tehillim-pagination-bar {
		grid-template-columns: 1fr;
	}
}

.su-tehillim-pagination-bar .su-tehillim-progress-navigator__label {
	grid-column: 1;
}

.su-tehillim-pagination-bar .su-tehillim-progress-rail {
	grid-column: 2;
}

.su-tehillim-pagination-bar .su-tehillim-prev-next {
	grid-column: 3;
}

.su-tehillim-progress-navigator__label {
	flex-shrink: 0;
	font-size: 0.78rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: var(--su-dark);
	opacity: 0.6;
}

/* Wraps naturally on narrow screens rather than overflowing or
   requiring a scrollbar. */
.su-tehillim-progress-rail {
	display: flex;
	flex: 1 1 auto;
	flex-wrap: wrap;
	justify-content: flex-start;
	min-width: 150px;
	gap: 0.5rem;
}

/* Real buttons with a 44x44px minimum touch target, per WCAG/mobile
   guidance -- not plain inline text. */
.su-tehillim-progress-marker {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.25rem;
	min-width: 44px;
	min-height: 44px;
	padding: 0.2rem 0.4rem;
	background: #fff !important;
	border: 1px solid var(--su-border) !important;
	border-radius: 8px;
	font-family: var(--su-font);
	font-weight: 700;
	font-size: 0.9rem;
	color: var(--su-dark) !important;
	cursor: pointer;
	transition: background 150ms ease, border-color 150ms ease, color 150ms ease;
}

/* Explicit hover -- not left to any inherited default, which is
   exactly the kind of gap that lets an unrelated theme/browser style
   (an unexpected accent color, low-contrast text) show through. */
.su-tehillim-progress-marker:hover {
	border-color: var(--su-active-page-gold) !important;
	background: rgba(195, 162, 98, 0.1) !important;
}

/* Completed: subtle check, otherwise the same inactive white/bordered
   treatment -- distinguishing "already read" from "not yet reached"
   without a second, competing active-style color. */
.su-tehillim-progress-marker--completed {
	opacity: 0.7;
}

.su-tehillim-progress-marker__check {
	font-size: 0.7rem;
}

/* Active (current) state: solid gold fill, bold white text -- meets
   WCAG AA (this gold against white text is well above 4.5:1). */
.su-tehillim-progress-marker--active {
	background: var(--su-active-page-gold) !important;
	border-color: var(--su-active-page-gold) !important;
	color: #fff !important;
	opacity: 1;
}

.su-tehillim-progress-marker--active:hover {
	background: var(--su-active-page-gold) !important;
	border-color: var(--su-active-page-gold) !important;
}

.su-tehillim-progress-marker:focus-visible {
	outline: 3px solid #000;
	outline-offset: 2px;
}

.su-tehillim-prev-next {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	flex-wrap: wrap;
}

.su-tehillim-prev-next button {
	background: none;
	border: none;
	padding: 0.5rem;
	font-family: var(--su-font);
	font-weight: 600;
	font-size: 0.85rem;
	color: var(--su-dark);
	cursor: pointer;
}

.su-tehillim-prev-next button:hover {
	text-decoration: underline;
}

.su-tehillim-prev-next button:focus-visible {
	outline: 3px solid #000;
	outline-offset: 2px;
}

/* The primary forward-navigation CTA -- distinct bordered button,
   bold uppercase, right-pointing arrow already in its own label text. */
.su-tehillim-read-next {
	padding: 0.75rem 1.5rem;
	background: #fff !important;
	border: 2px solid var(--su-active-page-gold, #c3a262) !important;
	border-radius: 10px;
	font-family: var(--su-font);
	font-weight: 700;
	font-size: 0.8rem;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: var(--su-dark) !important;
	cursor: pointer;
}

.su-tehillim-read-next:focus-visible {
	outline: 3px solid var(--su-active-page-gold, #c3a262);
	outline-offset: 2px;
}

.su-tehillim-reading-complete {
	margin-top: 1.25rem;
	padding: 1.25rem;
	background: var(--su-cream);
	border-radius: 14px;
	text-align: center;
}

.su-tehillim-reading-complete__title {
	font-weight: 700;
	font-size: 1rem;
	margin: 0 0 0.35rem;
}

.su-tehillim-reading-complete button {
	margin-top: 0.75rem;
}

.su-tehillim-seder-extra {
	list-style: none;
	margin: 0 0 1.1rem;
	padding: 0;
	font-size: 0.85rem;
}

.su-tehillim-seder-extra li {
	padding: 0.6rem 0;
	border-bottom: 1px solid var(--su-border);
}

/* Light cream card, dark text -- replacing the previous solid-black
   treatment, per the explicit request that this shouldn't visually
   overpower the reading canvas above it. Reuses the existing --su-cream
   / --su-dark tokens (already very close to the specific hexes given)
   rather than introducing two more near-duplicate color values. */
.su-tehillim-tradition-note {
	position: relative;
	overflow: hidden;
	margin: 1.5rem 0;
	padding: 1.25rem 1.5rem;
	background: var(--su-cream);
	color: var(--su-dark);
	border-radius: var(--su-radius);
	font-size: 0.88rem;
}

.su-tehillim-tradition-note p {
	opacity: 0.85;
	margin: 0 0 0.5rem;
}

.su-tehillim-tradition-note__label {
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	color: var(--su-dark);
	opacity: 1 !important;
	margin: 0 0 0.5rem;
}

/* The share action, embedded in the card's own bottom-right corner
   rather than as a separate standalone button below. */
.su-tehillim-tradition-note .su-tehillim-share {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	margin-top: 0.5rem;
	float: right;
	background: none;
	color: var(--su-dark);
	border: none;
	padding: 0;
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: none;
	letter-spacing: normal;
	cursor: pointer;
}

.su-tehillim-tradition-note .su-tehillim-share:hover {
	background: none;
	color: var(--su-active-page-gold, #c3a262);
	box-shadow: none;
	text-decoration: underline;
}

/* Start Over: a lightweight utility text link below the reading card,
   not a competing full-width action. */
.su-tehillim-start-over-link {
	display: block !important;
	width: fit-content;
	margin: 1.5rem auto 0 !important;
	text-align: center;
	background: none !important;
	background-color: transparent !important;
	border: none !important;
	border-bottom: none !important;
	box-shadow: none !important;
	padding: 0.5rem 0 !important;
	font-family: var(--su-font);
	font-weight: 400;
	font-size: 0.85rem;
	text-transform: none !important;
	letter-spacing: normal !important;
	text-decoration: none !important;
	color: var(--su-dark) !important;
	opacity: 0.75;
	cursor: pointer;
}

.su-tehillim-start-over-link:hover,
.su-tehillim-start-over-link:focus,
.su-tehillim-start-over-link:active {
	background: none !important;
	background-color: transparent !important;
	border: none !important;
	border-bottom: none !important;
	box-shadow: none !important;
	text-decoration: none !important;
	color: var(--su-dark) !important;
	opacity: 1;
}

.su-tehillim-start-over-link:focus-visible {
	outline: 3px solid #000;
	outline-offset: 2px;
}

/* -------------------------------------------------------------------
   Chapter reader
   ------------------------------------------------------------------- */

.su-tehillim-chapter {
	width: var(--su-container-width);
	max-width: var(--su-container-max);
	margin-left: auto;
	margin-right: auto;
	padding-top: var(--su-header-clearance);
	scroll-margin-top: var(--su-header-clearance);
}

.su-tehillim-breadcrumb {
	font-family: var(--su-font);
	font-size: 0.8rem;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	opacity: 0.7;
	margin-bottom: 1rem;
}

.su-tehillim-breadcrumb a {
	color: var(--su-text);
	text-decoration: none;
}

.su-tehillim-breadcrumb a:hover {
	text-decoration: underline;
}

.su-tehillim-breadcrumb .su-tehillim-breadcrumb__sep {
	margin: 0 0.4rem;
	opacity: 0.5;
}

.su-tehillim-chapter__title-block {
	margin-bottom: 1.5rem;
}

.su-tehillim-chapter__title-block h1 {
	font-size: 2rem;
	margin: 0 0 0.25rem;
}

.su-tehillim-chapter__hebrew-title {
	font-family: var(--su-hebrew-font);
	font-size: max(1.4rem, var(--su-hebrew-min-size));
	direction: rtl;
	opacity: 0.85;
}

.su-tehillim-chapter__nav {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.85rem;
	margin-bottom: 1.5rem;
	padding-bottom: 1.25rem;
	border-bottom: 2px solid var(--su-border);
}

.su-tehillim-chapter__controls {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
}

.su-tehillim-chapter__controls button {
	padding: 0.5rem 0.9rem;
	font-size: 0.72rem;
}

.su-tehillim-chapter__text {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 2.5rem;
}

.su-tehillim-chapter[data-show="hebrew"] .su-tehillim-chapter__english,
.su-tehillim-chapter[data-show="english"] .su-tehillim-chapter__hebrew {
	display: none;
}

.su-tehillim-chapter[data-show="hebrew"] .su-tehillim-chapter__text,
.su-tehillim-chapter[data-show="english"] .su-tehillim-chapter__text {
	grid-template-columns: 1fr;
}

@media (max-width: 760px) {
	.su-tehillim-chapter__text {
		grid-template-columns: 1fr;
		gap: 2rem;
	}
}

.su-tehillim-chapter__hebrew {
	font-family: var(--su-hebrew-font);
	font-size: max(1.4rem, var(--su-hebrew-min-size));
	line-height: 2.1;
}

.su-tehillim-chapter__english {
	font-family: var(--su-font);
	font-size: 1.05rem;
	line-height: 1.85;
}

.su-tehillim-chapter__title {
	font-weight: 700;
	text-transform: uppercase;
	margin-bottom: 0.5rem;
	opacity: 0.8;
}

.su-tehillim-verse {
	margin: 0 0 0.6rem;
}

.su-tehillim-verse__num {
	opacity: 0.5;
	font-size: 0.75em;
	font-family: var(--su-font);
	margin-inline-end: 0.4em;
	vertical-align: super;
}

.su-tehillim-chapter__intro {
	background: var(--su-surface);
	border-radius: var(--su-radius);
	padding: 1.25rem 1.5rem;
	margin-bottom: 1.5rem;
	font-size: 0.95rem;
}

.su-tehillim-chapter__source {
	margin-top: 2rem;
	font-size: 0.78rem;
	opacity: 0.6;
}

.su-tehillim-related-purposes {
	margin-top: 2rem;
	padding-top: 1.5rem;
	border-top: 2px solid var(--su-border);
}

.su-tehillim-related-purposes h2 {
	font-size: 1rem;
	margin-bottom: 0.6rem;
}

.su-tehillim-related-purposes ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.su-tehillim-related-purposes a {
	display: inline-block;
	padding: 0.4rem 0.9rem;
	background: var(--su-gold);
	color: var(--su-dark);
	text-decoration: none;
	border-radius: var(--su-radius-pill);
	font-size: 0.78rem;
	font-weight: 700;
	text-transform: uppercase;
}

.su-tehillim-chapter__footer-nav {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 1.75rem;
	margin-top: 2rem;
	padding-top: 1.5rem;
	border-top: 2px solid var(--su-border);
	text-align: center;
}

.su-tehillim-chapter__footer-nav a {
	text-decoration: none;
	color: var(--su-text);
	font-weight: 600;
	font-size: 0.9rem;
}

.su-tehillim-chapter__footer-nav a:hover {
	text-decoration: underline;
}

.su-tehillim-chapter__footer-nav .su-tehillim-chapter__footer-center {
	display: flex;
	gap: 1.75rem;
	flex-wrap: wrap;
	justify-content: center;
}

@media (max-width: 600px) {
	.su-tehillim-chapter__footer-nav,
	.su-tehillim-chapter__footer-nav .su-tehillim-chapter__footer-center {
		gap: 1.1rem;
	}
}

.su-tehillim-error {
	background: var(--su-surface);
	border-radius: var(--su-radius);
	padding: 1.25rem 1.5rem;
}

/* -------------------------------------------------------------------
   Browse All 150 (range-grouped index)
   ------------------------------------------------------------------- */

.su-tehillim-browse {
	width: var(--su-container-width);
	max-width: var(--su-container-max);
	margin-left: auto;
	margin-right: auto;
	padding-top: var(--su-header-clearance);
	scroll-margin-top: var(--su-header-clearance);
}

.su-tehillim-browse__ranges {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-bottom: 1.75rem;
}

.su-tehillim-browse__range-tab {
	padding: 0.55rem 1.1rem;
	font-family: var(--su-font);
	font-weight: 700;
	font-size: 0.8rem;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	background: var(--su-surface);
	border: 2px solid transparent;
	border-radius: var(--su-radius-pill);
	cursor: pointer;
}

.su-tehillim-browse__range-tab[aria-selected="true"] {
	background: var(--su-gold);
	border-color: var(--su-dark);
}

.su-tehillim-browse__group {
	display: none;
}

.su-tehillim-browse__group.is-active {
	display: block;
}

.su-tehillim-index {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
	gap: 0.6rem;
}

.su-tehillim-index__item {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	padding: 0.85rem 0.9rem;
	background: #fff;
	border: 1px solid var(--su-border);
	border-radius: 8px;
	text-decoration: none;
	color: var(--su-dark);
	font-weight: 700;
	cursor: pointer;
	transition: background 150ms ease, border-color 150ms ease;
}

.su-tehillim-index__item:hover,
.su-tehillim-index__item:focus-visible {
	border-color: var(--su-active-page-gold, #c3a262);
	background: rgba(195, 162, 98, 0.1);
	outline: none;
}

.su-tehillim-index__number {
	font-size: 0.95rem;
}

.su-tehillim-index__title {
	font-size: 0.72rem;
	font-weight: 400;
	opacity: 0.65;
	text-transform: none;
}

@media (max-width: 480px) {
	.su-tehillim-index {
		grid-template-columns: repeat(auto-fill, minmax(105px, 1fr));
	}

	.su-tehillim-app__modes .su-tehillim-app__mode {
		padding: 0.7rem 0.5rem;
		font-size: 0.75rem;
		letter-spacing: 0.01em;
	}
}

/* -------------------------------------------------------------------
   Purpose menu (landing-page preview grid, separate from the Builder's
   own internal purpose cards -- see [sephardicu_tehillim_purpose_menu])
   ------------------------------------------------------------------- */

.su-tehillim-purpose-menu {
	--su-gold: var(--su-tehillim-accent, #fecd8b);
	--su-dark: var(--su-tehillim-dark, #001317);
	--su-tehillim-button-gold: var(--su-tehillim-button-gold-override, #7a5c12);
	--su-border: var(--su-tehillim-border, rgba(0, 19, 23, 0.15));
	--su-radius: var(--su-tehillim-border-radius, 20px);
	--su-font: var(--su-tehillim-font, "Rubik", -apple-system, BlinkMacSystemFont, sans-serif);
	--su-container-max: 1125px;
	--su-container-width: 95%;

	width: var(--su-container-width);
	max-width: var(--su-container-max);
	margin-left: auto;
	margin-right: auto;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	gap: 1.25rem;
}

@media (max-width: 700px) {
	.su-tehillim-purpose-menu {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 460px) {
	.su-tehillim-purpose-menu {
		grid-template-columns: 1fr;
	}
}

.su-tehillim-purpose-menu__card {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	padding: 1.5rem;
	border-radius: var(--su-radius);
	font-family: var(--su-font);
	text-decoration: none;
	background: var(--su-tehillim-button-gold);
	color: #ffffff;
	transition: background 120ms ease, color 120ms ease;
}

.su-tehillim-purpose-menu__card:hover,
.su-tehillim-purpose-menu__card:focus-visible {
	background: var(--su-dark);
	color: var(--su-gold);
	outline: none;
}

.su-tehillim-purpose-menu__card:focus-visible {
	outline: 3px solid #000;
	outline-offset: 2px;
}

.su-tehillim-purpose-menu__title {
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	font-size: 1.05rem;
}

.su-tehillim-purpose-menu__copy {
	font-size: 0.85rem;
	opacity: 0.9;
	font-weight: 400;
	text-transform: none;
	letter-spacing: normal;
}

.su-tehillim-purpose-menu__card--pending {
	background: transparent;
	border: 2px dashed var(--su-border);
	color: var(--su-dark);
	cursor: default;
}

.su-tehillim-purpose-menu__card--pending .su-tehillim-purpose-menu__copy {
	opacity: 0.7;
}

.su-tehillim-purpose-menu__badge {
	align-self: flex-start;
	font-size: 0.68rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	padding: 0.2rem 0.6rem;
	border-radius: 999px;
	background: var(--su-border);
	color: var(--su-dark);
}

/* -------------------------------------------------------------------
   Finder module ([sephardicu_tehillim_finder]) -- the compact, tabbed
   "Find a Reading / Browse All 150" module. One shortcode, one
   stylesheet (this one), one script (finder.js) -- see the shortcode's
   own docblock in class-su-shortcodes.php for why this replaced an
   Elementor-assembled version of the same idea.
   ------------------------------------------------------------------- */

.su-tehillim-finder {
	width: var(--su-container-width);
	max-width: var(--su-container-max);
	margin-left: auto;
	margin-right: auto;
	padding-top: 1.5rem;
	padding-bottom: 1.5rem;
}

.su-tehillim-finder__tabs {
	background: var(--su-surface);
	border-radius: var(--su-radius);
	padding: 0.5rem;
}

.su-tehillim-finder__nav {
	display: flex;
	flex-wrap: wrap;
}

.su-tehillim-finder__tab {
	flex: 1 1 220px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.15rem;
	padding: 0.9rem 1rem;
	border-radius: calc(var(--su-radius) - 6px);
	cursor: pointer;
	color: var(--su-text);
	background: transparent;
	border: none;
	font-family: var(--su-font);
	transition: background 120ms ease, color 120ms ease;
}

.su-tehillim-finder__tab-title {
	font-weight: 700;
	font-size: 0.95rem;
	text-transform: uppercase;
	letter-spacing: 0.02em;
}

.su-tehillim-finder__tab-sub {
	font-size: 0.78rem;
	opacity: 0.65;
}

.su-tehillim-finder__tab.is-active {
	background: var(--su-dark);
	color: var(--su-gold);
}

.su-tehillim-finder__tab.is-active .su-tehillim-finder__tab-sub {
	opacity: 0.85;
}

.su-tehillim-finder__tab:hover:not(.is-active) {
	background: rgba(0, 19, 23, 0.06);
}

.su-tehillim-finder__tab:focus-visible {
	outline: 3px solid #000;
	outline-offset: 2px;
}

.su-tehillim-finder__panel {
	flex-basis: 100%;
	display: none;
	padding: 1.75rem 1rem 0.5rem;
}

.su-tehillim-finder__panel.is-active {
	display: block;
}

.su-tehillim-finder__steps {
	list-style: none;
	margin: 0 0 1.5rem;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 1.5rem;
}

.su-tehillim-finder__steps li {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.85rem;
	color: var(--su-text);
	opacity: 0.85;
}

.su-tehillim-finder__step-num {
	flex-shrink: 0;
	width: 1.5rem;
	height: 1.5rem;
	border-radius: 50%;
	background: var(--su-gold);
	color: var(--su-dark);
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	font-size: 0.75rem;
}

.su-tehillim-finder__panel-lead {
	text-align: center;
	max-width: 60ch;
	margin-left: auto;
	margin-right: auto;
}

/* The Builder and Index normally set their own container width and
   top header-clearance padding (see their own rules elsewhere in this
   file) for when they're used standalone. Nested inside the finder,
   that container/clearance is already provided by .su-tehillim-finder
   itself -- without this override, both would apply and the inner
   width would compute as 95% of an already-1125px-capped parent
   (~1069px), and the header clearance would effectively double up. */
.su-tehillim-finder .su-tehillim-builder,
.su-tehillim-finder .su-tehillim-index,
.su-tehillim-finder .su-tehillim-browse {
	width: 100%;
	max-width: none;
	margin-left: 0;
	margin-right: 0;
	padding-top: 0;
	scroll-margin-top: var(--su-header-clearance);
}

@media (max-width: 560px) {
	.su-tehillim-finder__tab {
		flex-basis: 100%;
	}
}

/* =====================================================================
   APP SHELL -- the new state-machine application surface. The outer
   .su-tehillim-builder rule elsewhere in this file still provides
   width/max-width/header-clearance (both classes coexist on the same
   root element); this section adds the white "app card" shell and
   everything specific to the mode/screen/progress state machine.
   ===================================================================== */

.su-tehillim-app {
	box-sizing: border-box;
	max-width: 100%;
	background: var(--su-surface);
	border-radius: 24px;
	box-shadow: 0 10px 40px rgba(0, 19, 23, 0.08);
	padding: clamp(1.5rem, 3vw, 2.5rem);
	overflow-x: hidden;
}

/* Mode selector: Guided by Purpose / Read Tehillim */
.su-tehillim-app__modes {
	display: flex;
	background: var(--su-cream) !important;
	border-radius: 28px;
	padding: 0.35rem;
	margin-bottom: 2rem;
	gap: 0.35rem;
	max-width: 100%;
	box-sizing: border-box;
}

.su-tehillim-app__modes .su-tehillim-app__mode {
	flex: 1 1 0;
	min-width: 0; /* Flex items default to min-width:auto -- without this, the bold/uppercase/letter-spaced text refuses to shrink below its own intrinsic width, overflowing both this button and the whole track on narrow screens. */
	max-width: 100%;
	box-sizing: border-box;
	overflow-wrap: break-word;
	white-space: normal;
	padding: 0.85rem 0.75rem;
	border: none;
	border-radius: 24px;
	/* Explicitly matches the track's own background rather than relying
	   on `transparent` to "show through" it -- a prior bug in this
	   project (the purpose-card white-on-white issue) traced back to an
	   external theme/button style winning a specificity tie against a
	   plain class rule. This uses a higher-specificity selector plus an
	   explicit color value (not transparent) so the inactive state
	   reliably matches the track regardless of what else targets
	   `button` on this page. */
	background: var(--su-cream) !important;
	color: var(--su-text) !important;
	font-family: var(--su-font);
	font-weight: 700;
	font-size: 0.9rem;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	cursor: pointer;
	transition: background 150ms ease, color 150ms ease;
}

.su-tehillim-app__modes .su-tehillim-app__mode.is-active {
	background: var(--su-dark) !important;
	color: var(--su-gold) !important;
}

.su-tehillim-app__mode:focus-visible {
	outline: 3px solid #000;
	outline-offset: 2px;
}

.su-tehillim-app__mode-panel {
	display: none;
}

.su-tehillim-app__mode-panel.is-active {
	display: block;
}

/* Progress indicator: current-step number+label on the left, a compact
   3-segment dash/dot track on the right -- matched to the reference
   screenshots rather than a generic 3-circle stepper. */
.su-tehillim-progress {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: 2rem;
}

.su-tehillim-progress__current {
	display: flex;
	align-items: center;
	gap: 0.65rem;
}

.su-tehillim-progress__num {
	flex-shrink: 0;
	width: 1.8rem;
	height: 1.8rem;
	border-radius: 50%;
	background: var(--su-dark);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	font-size: 0.85rem;
}

.su-tehillim-progress__label {
	font-weight: 700;
	font-size: 0.95rem;
}

.su-tehillim-progress__track {
	display: flex;
	align-items: center;
	gap: 0.35rem;
}

.su-tehillim-progress__seg {
	height: 0.4rem;
	width: 0.4rem;
	border-radius: 999px;
	background: var(--su-border);
	transition: width 200ms ease, background 200ms ease;
}

.su-tehillim-progress__seg.is-active {
	width: 1.6rem;
	background: var(--su-dark);
}

.su-tehillim-progress__seg.is-done {
	background: var(--su-tehillim-button-gold);
}

/* Screens: only one visible at a time within the active mode panel --
   this is the core of the "one application, active state replaces the
   previous state" requirement, not a vertically stacked page. */
.su-tehillim-screen {
	display: none;
}

.su-tehillim-screen.is-active {
	display: block;
}

.su-tehillim-screen__title {
	font-size: 1.6rem;
	font-weight: 700;
	margin: 0 0 0.5rem;
	display: flex;
	align-items: center;
	gap: 0.6rem;
}

.su-tehillim-screen__lead {
	font-size: 0.95rem;
	opacity: 0.7;
	margin: 0 0 1.5rem;
}

.su-tehillim-screen__eyebrow {
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: var(--su-tehillim-button-gold);
	margin: 0 0 0.5rem;
}

.su-tehillim-screen__header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: 1.5rem;
	flex-wrap: wrap;
}

.su-tehillim-screen__check {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.7rem;
	height: 1.7rem;
	border-radius: 50%;
	background: var(--su-dark);
	color: #fff;
	flex-shrink: 0;
}

/* Shared outline/block button treatment ("Change Purpose", "Edit
   Options", "Start Over") -- muted gold, matching the reference
   screenshots' secondary-action buttons.

   HOVER FIX: the previous hover state used `opacity` to darken this
   button, which reduces the opacity of BOTH the gold background AND
   the white text together, blending both with whatever sits behind
   the button -- an unpredictable color mix that can shift toward an
   unrelated hue (reported as a magenta/red cast) depending on what's
   underneath. Replaced with an explicit, precomputed darker shade of
   the same gold -- no transparency or blending involved at all, so no
   such artifact is possible regardless of what's behind it. */
.su-tehillim-btn-outline {
	flex-shrink: 0;
	padding: 0.65rem 1.25rem;
	background: var(--su-tehillim-button-gold);
	color: #fff;
	border: none;
	border-radius: 10px;
	font-family: var(--su-font);
	font-weight: 700;
	font-size: 0.8rem;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	text-decoration: underline;
	cursor: pointer;
	transition: opacity 150ms ease;
}

.su-tehillim-btn-outline:hover {
	background: #5f4710 !important; /* Explicit darker shade of --su-tehillim-button-gold (#7a5c12) -- see comment above */
	opacity: 1;
}

.su-tehillim-btn-outline:focus-visible {
	outline: 3px solid #000;
	outline-offset: 2px;
}

.su-tehillim-btn-block {
	display: block;
	width: 100%;
	margin-top: 2rem;
	padding: 1rem;
	background: transparent;
	color: var(--su-text);
	border: 1.5px solid var(--su-border);
	border-radius: 14px;
	font-family: var(--su-font);
	font-weight: 700;
	font-size: 0.85rem;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	cursor: pointer;
	transition: border-color 150ms ease, background 150ms ease;
}

.su-tehillim-btn-block:hover {
	border-color: var(--su-dark);
	background: var(--su-cream);
}

.su-tehillim-btn-block:focus-visible {
	outline: 3px solid #000;
	outline-offset: 2px;
}

/* Purpose grid within Screen 1 */
.su-tehillim-app__purposes {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.25rem;
}

@media (max-width: 900px) {
	.su-tehillim-app__purposes {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 600px) {
	.su-tehillim-app__purposes {
		grid-template-columns: 1fr;
	}
}

/* Privacy note under the dedication field */
.su-tehillim-builder__privacy-note {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	font-size: 0.78rem;
	opacity: 0.6;
	margin-top: 1rem;
}

/* Read Tehillim mode */
.su-tehillim-builder__subheading {
	font-size: 0.95rem;
	color: var(--su-dark);
	opacity: 0.7;
	margin: -0.5rem 0 1.5rem;
}

.su-tehillim-read-options {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1rem;
	margin-bottom: 1.5rem;
}

@media (max-width: 600px) {
	.su-tehillim-read-options {
		grid-template-columns: 1fr;
	}
}

.su-tehillim-read-option {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 0.5rem;
	width: 100% !important;
	max-width: 100% !important;
	box-sizing: border-box !important;
	white-space: normal !important;
	padding: 1.75rem 1.25rem;
	background: #fff !important;
	border: 1.5px solid var(--su-border) !important;
	border-radius: 18px;
	color: var(--su-text) !important;
	font-family: var(--su-font);
	cursor: pointer;
	transition: border-color 150ms ease, background 150ms ease;
}

.su-tehillim-read-option:hover {
	border-color: var(--su-active-page-gold, #c3a262) !important;
}

.su-tehillim-read-option.is-active {
	border-color: var(--su-dark) !important;
}

.su-tehillim-read-option__icon {
	font-size: 2rem;
	line-height: 1;
	margin-bottom: 0.25rem;
}

.su-tehillim-read-option__title {
	font-weight: 700;
	font-size: 1rem;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	color: var(--su-dark);
}

.su-tehillim-read-option__desc {
	font-size: 0.85rem;
	font-weight: 400;
	color: var(--su-dark);
	opacity: 0.7;
	line-height: 1.45;
	overflow-wrap: break-word !important;
	white-space: normal !important;
}

.su-tehillim-read-option__cta {
	margin-top: 0.5rem;
	font-weight: 700;
	font-size: 0.85rem;
	color: var(--su-tehillim-button-gold);
}

.su-tehillim-read-option:focus-visible {
	outline: 3px solid #000;
	outline-offset: 2px;
}

.su-tehillim-methodology-link {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0 0 1.5rem;
	text-decoration: none;
	color: var(--su-dark);
}

.su-tehillim-methodology-link:hover span:last-child {
	text-decoration: underline;
}

.su-tehillim-methodology-link__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
	flex-shrink: 0;
	border-radius: 50%;
	background: var(--su-tehillim-button-gold);
	color: #fff;
	font-size: 12px;
	line-height: 1;
	font-style: normal;
}

.su-tehillim-methodology-link span:last-child {
	font-size: 12px;
	font-weight: 600;
}

.su-tehillim-read-screen {
	display: none;
}

.su-tehillim-read-screen.is-active {
	display: block;
}

.su-tehillim-today-summary {
	background: #fff;
	border: 1.5px solid var(--su-border);
	border-radius: 18px;
	padding: 1.75rem;
	text-align: left;
}

.su-tehillim-today-summary__eyebrow {
	font-size: 0.78rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: var(--su-dark);
	opacity: 0.6;
	margin: 0 0 0.6rem;
}

.su-tehillim-today-summary__date {
	font-size: 1.25rem;
	font-weight: 700;
	text-transform: uppercase;
	color: var(--su-dark);
	margin: 0 0 0.6rem;
}

.su-tehillim-today-summary__cycle {
	font-size: 0.88rem;
	color: var(--su-dark);
	opacity: 0.75;
	line-height: 1.5;
	margin: 0 0 1.1rem;
}

.su-tehillim-today-summary__begin {
	display: inline-block;
	background: var(--su-tehillim-button-gold) !important;
	border: none !important;
	border-radius: var(--su-radius-pill);
	padding: 0.85rem 1.75rem !important;
	font-family: var(--su-font);
	font-weight: 700;
	font-size: 0.85rem;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	color: #fff !important;
	cursor: pointer;
}

.su-tehillim-today-summary__begin:hover {
	background: #5f4710 !important;
	text-decoration: none;
}

/* Result screen (rendered by renderSeder() in builder.js). This now
   fetches and renders the primary chapter's actual Hebrew/English text
   inline, with its own toolbar, matching the reference mockup -- via
   the new read-only /tehillim/chapters/{n} endpoint and
   renderInlineChapter() in builder.js. The seder list below it still
   links to the full chapter pages for anything beyond that first
   chapter. */
.su-tehillim-builder__right h2 {
	font-size: 1.5rem;
	margin: 0 0 0.5rem;
}

.su-tehillim-builder__right > p {
	opacity: 0.7;
	margin: 0 0 1.5rem;
}

.su-tehillim-dedication {
	background: var(--su-gold-wash);
	border-radius: 14px;
	padding: 1rem 1.25rem;
	font-weight: 600;
	margin-bottom: 1.5rem;
}

.su-tehillim-inline-chapter {
	background: var(--su-cream);
	border-radius: 18px;
	padding: 1.5rem;
	margin-bottom: 1.5rem;
	scroll-margin-top: var(--su-header-clearance);
}

.su-tehillim-inline-chapter__eyebrow {
	display: inline-block;
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: none;
	letter-spacing: normal;
	color: var(--su-tehillim-button-gold);
	background: var(--su-gold-wash);
	border-radius: 999px;
	padding: 0.3rem 0.85rem;
	margin: 1.25rem 0 0.5rem;
}

/* Scoped to the result screen specifically -- the shared
   .su-tehillim-chapter__english class also styles the separate
   standalone chapter-reader page, which this change isn't meant to
   touch. */
.su-tehillim-inline-chapter .su-tehillim-chapter__english {
	font-style: italic;
}

.su-tehillim-inline-chapter__text {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 2rem;
}

.su-tehillim-inline-chapter__text > *:only-child {
	grid-column: 1 / -1;
}

@media (max-width: 700px) {
	.su-tehillim-inline-chapter__text {
		grid-template-columns: 1fr;
	}
}

.su-tehillim-inline-chapter__link a {
	color: var(--su-tehillim-button-gold);
	font-weight: 600;
}

.su-tehillim-share {
	margin-top: 1rem;
}

@media (prefers-reduced-motion: reduce) {
	.su-tehillim-btn,
	.su-tehillim-purpose-card,
	.su-tehillim-variant-card,
	.su-tehillim-purpose-menu__card,
	.su-tehillim-finder__tab,
	.su-tehillim-app__mode,
	.su-tehillim-read-option,
	.su-tehillim-progress__seg,
	.su-tehillim-btn-outline,
	.su-tehillim-btn-block,
	.su-tehillim-builder__generate,
	.su-tehillim-progress-marker {
		transition: none;
	}
}