/**
 * LBI Profile — the trip sheet.
 *
 * Design language: a well-set travel document. The trip facts are the hero,
 * rendered as ruled rows with dotted leaders, including quiet "Still open"
 * rows for what is not decided yet, so the sheet itself shows the trip taking
 * shape. Everything around the sheet stays disciplined and quiet.
 *
 * Voice pairing: the site's system sans (inherited) carries titles and values;
 * a system mono stack carries the document apparatus (kickers, labels,
 * provenance, group titles). No external font loads.
 *
 * Palette stays "Clean Pacific" (Pierce theme): near-white paper, slate ink,
 * one deep pacific-cyan accent, confirm-green actions. Tokens scoped to
 * .lbi-profile. (The quiz cards carry the matching --lq-* remap in quiz.css.)
 */

/* The theme's .wrap gives normal content an 800px reading column (200px side
   paddings inside a 1200px wrap). The dashboard is designed at 1080px, so on
   dashboard pages only, relax the wrap padding until the sheet gets its
   intended width. Scoped to the body class the profile template sets. */
@media (min-width: 1100px) {
	body.lq-profile-page .site-inner > .wrap {
		padding-left: 60px;
		padding-right: 60px;
	}
}

.lbi-profile {
	--lp-paper: #fffefb;
	--lp-ink: #2a333b;
	--lp-muted: #68737c;
	--lp-rule: #dfe3e4;
	--lp-leader: #c0cad0;
	--lp-accent: #00708b;
	--lp-accent-bright: #28c3ea;
	--lp-go: #008542;
	--lp-go-deep: #007033;
	/* A deep oxidised-lava red, not the flat-UI #c0392b it replaced: that one was
	   the only bright thing on a page whose every other token is deep, which is
	   exactly why the delete control read as an OS alert dropped into a document.
	   Also buys contrast on --lp-paper (5.0:1 -> 7.4:1), and the one place this is
	   used as TEXT is a .72rem mono hover state, where 5.0:1 was thin. The literal
	   fallback in the calculator's price-trip.css mirrors this value. */
	--lp-signal: #9a2f22;
	--lp-signal-deep: #7f2419;
	--lp-signal-soft: rgba(154, 47, 34, .05);
	--lp-radius: 6px;
	--lp-measure: 64ch; /* reader measure: cap prose near 64 characters per line (audit H1) */
	/* Tier 2 (2026-09-17): the three card paddings and the one sibling gap. A card
	   never sets its own padding; it picks a tier. Values are the plurality of what
	   the 15 hand-set cards used (audit §4), so most cards move ≤3px. */
	--lp-pad: 1.1rem 1.2rem;
	--lp-pad-compact: .75rem .9rem;
	--lp-pad-sheet: clamp(1.4rem, 4vw, 2.25rem);
	--lp-gap: 1rem;
	--lp-shadow: 0 1px 2px rgba(42, 51, 59, .05), 0 10px 30px -18px rgba(42, 51, 59, .18);
	--lp-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
	/* Aliases: the trip calculator's price-trip.css reads these three names
	   (price-trip.css:5-8); nothing else does. The real tokens are ink/rule/paper,
	   so without these its inner hairlines, inputs and text always fell back to
	   literals (audit M6). Define them here, where price-trip.css only loads. */
	--lp-text: var(--lp-ink);
	--lp-line: var(--lp-rule);
	--lp-surface: var(--lp-paper);

	max-width: 1080px;
	margin: 0 auto;
	padding: clamp(1.25rem, 4vw, 2.75rem) clamp(1rem, 4vw, 1.75rem) 4rem;
	color: var(--lp-ink);
	font-family: inherit;
	-webkit-font-smoothing: antialiased;
}

/* Titled groups: quiet mono eyebrows over a hairline, so the page reads as one
   document with labeled parts rather than a stack of competing cards. */
.lbi-profile__group {
	display: flex;
	flex-direction: column;
	gap: var(--lp-gap);
	margin-bottom: clamp(2rem, 5vw, 3rem);
}
.lbi-profile__group:last-child {
	margin-bottom: 0;
}
/* Group titles ("Your trip", "Why we recommend this", "Saved pages") used to be
   a .72rem muted mono kicker, which drowned between the cards they introduce
   (Gerrit, phone pass 2026-08-22). Still the mono label voice, but at body
   size, in ink, on a 2px rule with a short accent bar: a visible seam when
   scrolling, not a larger heading competing with the card headlines. */
.lbi-profile__group-title {
	position: relative;
	margin: 0;
	padding: .2rem 0 .6rem;
	border-bottom: 2px solid var(--lp-ink);
	font-family: var(--lp-mono);
	font-size: .92rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .14em;
	color: var(--lp-ink);
}
.lbi-profile__group-title::before {
	content: '';
	position: absolute;
	left: 0;
	bottom: -2px;
	width: 3rem;
	height: 2px;
	background: var(--lp-accent);
}

/* #407 deleted the whole .lbi-profile__group--before-you-go block (a title
   demotion, a 10% group fade, and an extra top margin) so the group reads like
   its siblings. A stored Autoptimize critical-CSS snapshot still carries all
   three declarations (confirmed 2026-09-17 in live
   uploads/ao_ccss/ccss_47995e716aec0a4a80b98989eabce01e.css), and CLAUDE.md is
   explicit: never fix above-the-fold CSS by un-matching a rule. Restate the
   wanted values at the SAME specificity so the deferred full sheet, loading
   after the inline snapshot, wins the tie. Regenerating the critical CSS for
   /your-trip/ is the cure; this is the belt. */
.lbi-profile__group--before-you-go { margin-top: 0; opacity: 1; }
.lbi-profile__group--before-you-go .lbi-profile__group-title { color: var(--lp-ink); border-bottom-color: var(--lp-ink); }

.lbi-profile__zone {
	display: flex;
	flex-direction: column;
	gap: var(--lp-gap);
}

/* Bands carry no padding of their own: each band's frame owns its inner spacing
   and the zone gap owns the space between them. The reset is global because
   trip-calculator-plugin/assets/css/trip-calculator.css:11 paints a bare
   `section { padding: 2rem 0 }` on every frontend page (gated to its own two
   templates in PR #405); without this reset every dashboard band would inherit
   32px top and bottom. Formerly reset per-zone (results, footer) and mis-blamed
   on "the theme" (2026-09-04) — it is the calculator's site-wide sheet (H4). */
.lbi-profile__section {
	margin: 0;
	padding: 0;
}

/* ---- Card primitive (Tier 2, 2026-09-17) ------------------------------------
   The one paper surface: paper, hairline, token radius, one padding tier. A
   component adds it in MARKUP (class), keeps only what is genuinely its own
   (widths, grids, accent edges, states) and never restates the surface. Literal
   fallbacks so the class is safe wherever the --lp tokens are out of scope.
   Defined here, above every component, on purpose: `border` is a shorthand, so a
   component's `border-left` (choice/restore/reset-done) must come LATER to win.
   The calculator's read sheet and estimate card carry no class of ours, so their
   (0,2,0) selectors ride along in both lists (was the standalone override). */
.lbi-prof-card,
.lbi-profile .tc-sheet,
.lbi-profile .tc-est {
	background: var(--lp-paper, #fffefb);
	border: 1px solid var(--lp-rule, #dfe3e4);
	border-radius: var(--lp-radius, 6px);
	padding: var(--lp-pad, 1.1rem 1.2rem);
}
.lbi-prof-card--raised { box-shadow: var(--lp-shadow); }
.lbi-prof-card--compact { padding: var(--lp-pad-compact, .75rem .9rem); }
/* The document sheet: ink top rule, lifted, generous padding (spine, ghost,
   calculator sheet + estimate; the ghost keeps its own bottom padding for the mask). */
.lbi-prof-card--sheet,
.lbi-profile .tc-sheet,
.lbi-profile .tc-est {
	border-top: 2px solid var(--lp-ink, #2a333b);
	box-shadow: var(--lp-shadow);
	padding: var(--lp-pad-sheet, clamp(1.4rem, 4vw, 2.25rem));
}

/* Theme opt-out utility (Tier 2). Pierce sets text-transform/letter-spacing
   DIRECTLY on h1-h6 and button (style.css:267-280, 488-504), so this must sit on
   the heading or button ELEMENT — a wrapper class inherits nothing past an
   element rule. Bare form for markup outside .lbi-profile (drawer), bumped form
   so it beats .button (0,1,0) regardless of bundle order. The enumerated list
   below stays for existing markup; NEW sentence-case headings/buttons use this. */
.lbi-prof-plain,
.lbi-profile .lbi-prof-plain { text-transform: none; letter-spacing: normal; }

/* The old theme's content-link marker underline (blue gradient on .content a)
   is gone from the current stylesheets but survives in stale Autoptimize
   critical-CSS snapshots (uploads/ao_ccss). Never let it paint on the sheet;
   .content-scoped variant outranks the snapshot rule on specificity. */
.lbi-profile a,
.content .lbi-profile a {
	background-image: none;
	text-decoration: none;
}

/* Lists, once, dashboard-wide (ruling L). The theme's .entry-content ul,ol (0,1,1)
   indents 40px and .entry-content ul>li (0,1,2) paints a bullet, and it loads
   AFTER our sheets, so every single-class list reset loses. Zero it here at
   (0,2,1)/(0,2,2) so it wins regardless of bundle order. This also covers the
   embedded calculator (tcc renders inside .lbi-profile). Two quiz lists opt back
   into bullets in quiz.css. margin-bottom is NOT zeroed here — components own their
   own vertical spacing; restate it where the theme's 28px is still winning. */
.content .lbi-profile ul,
.content .lbi-profile ol { margin-left: 0; padding-left: 0; list-style: none; }
.content .lbi-profile ul > li,
.content .lbi-profile ol > li { list-style: none; margin-left: 0; }
/* The tcc read-view CHANGE link draws its underline with text-decoration, which
   the a blanket above strips inside the dashboard; restate it above (0,2,1). */
.content .lbi-profile a.tc-sheet__ro-edit { text-decoration: underline; }

/* Colour is the leak the blanket above does NOT cover: .content a (0,1,1) still
   outranks any single-class component on colour, so the tabs rendered theme ink
   instead of --lp-muted and the saved-row titles lost their hover (audit D2,
   2026-08-21, measured on /your-trip/). One ancestor class (0,2,0) per
   component restates the declared colour; state selectors get the same bump so
   they keep winning over their base. */
.lbi-profile .lbi-prof-tabs__tab { color: var(--lp-muted); }
.lbi-profile .lbi-prof-tabs__tab:hover { color: var(--lp-accent); }
.lbi-profile .lbi-prof-invite__link { color: var(--lp-ink); }
.lbi-profile .lbi-prof-next__card { color: var(--lp-ink); }
.lbi-profile .lbi-prof-ocard { color: var(--lp-ink); }
.lbi-profile .lbi-prof-rec__link { color: var(--lp-accent); }
.lbi-profile .lbi-prof-savedrow__title { color: var(--lp-ink); }
.lbi-profile .lbi-prof-savedrow__title:hover { color: var(--lp-accent); }

/* Sentence-case headings inside the sheet: pierce uppercases every h1-h3 with
   2px tracking at low specificity (theme gotcha). Deliberate mono eyebrows set
   their own transform; these are prose headings and read as written (audit D1). */
.lbi-prof-feedback__title,
.lbi-prof-restore__title,
.lbi-prof-choice__title {
	text-transform: none;
	letter-spacing: normal;
}

/* ---- Band A: the identity band ------------------------------------------- */
/* Two shapes for two jobs (see Lbi_Profile_Bands::header_band).
   Pre-email it is the pitch: a compact, centered card matching the other
   dashboard cards (surface + hairline border + soft shadow) rather than the old
   full-width document header (Gerrit reversed the widen decision, 2026-07-07).
   Dialled back from its original scale 2026-07-13: it still leads the page, it
   just no longer shouts over the trip sheet it is asking you to keep. */
.lbi-prof-head {
	margin: 0;
}

.lbi-prof-head__main {
	min-width: 0;
}

.lbi-prof-head__kicker {
	display: inline-block;
	font-family: var(--lp-mono);
	font-size: .72rem;
	letter-spacing: .18em;
	text-transform: uppercase;
	/* Muted, not accent (hierarchy pass 2026-08-15): kickers are apparatus and
	   share one whisper volume everywhere; accent is spent on actions. */
	color: var(--lp-muted);
	font-weight: 600;
	margin-bottom: .5rem;
}

.lbi-prof-head__title {
	font-size: clamp(1.45rem, 3vw, 1.85rem);
	line-height: 1.15;
	letter-spacing: -.015em;
	margin: 0;
	color: var(--lp-ink);
}

/* Opt out of the theme's global uppercase (same fix as the quiz, lbi-quizzes
   0.34.2). The pierce theme force-uppercases every heading and .button site-wide;
   the dashboard's readable HEADINGS and action BUTTONS are meant to read as
   sentences, so restore that. The dashboard's DELIBERATE mono labels — the
   kickers, __group-title, __spine-title, card kickers, and the quiet
   __reset__open link — set text-transform themselves and are untouched. */
.lbi-prof-head__title,
.lbi-prof-feedback__title,
.lbi-prof-choice__title,
.lbi-prof-restore__title,
.lbi-prof-reset__donetitle,
.lbi-drawer__title,
.lq-dash__title,
.lbi-prof-identity__btn,
.lbi-prof-magiclink__btn,
.lbi-prof-reset__yes,
.lbi-prof-reset__no,
.lbi-prof-reset__donebtn,
.lbi-prof-reset__start,
.lbi-prof-restore__btn,
.lbi-prof-linkreset__open,
.lbi-prof-linkreset__yes,
.lbi-prof-linkreset__no,
.lbi-prof-recover__toggle,
.lbi-prof-recover__btn,
.lbi-prof-feedback__btn,
.lbi-prof-feedback__ratebtn,
.lbi-prof-savednote__btn,
.lbi-drawer__btn {
	text-transform: none;
}
.lbi-prof-identity__btn,
.lbi-prof-magiclink__btn,
.lbi-prof-reset__yes,
.lbi-prof-reset__no,
.lbi-prof-reset__donebtn,
.lbi-prof-reset__start,
.lbi-prof-restore__btn,
.lbi-prof-linkreset__open,
.lbi-prof-linkreset__yes,
.lbi-prof-linkreset__no,
.lbi-prof-recover__toggle,
.lbi-prof-recover__btn,
.lbi-prof-feedback__btn,
.lbi-prof-feedback__ratebtn,
.lbi-prof-savednote__btn,
.lbi-drawer__btn {
	letter-spacing: normal;
}
/* Third leg of the same theme opt-out: pierce also paints `button:hover` with a
   solid green fill at (0,1,1). The dashboard's LINK-STYLED buttons set their
   background at rest with a single class (0,1,0), which wins the cascade — but
   only until hover, where the theme's rule takes the background while the
   plugin's own :hover keeps the text color: dark green fill, near-black text,
   unreadable (Gerrit, 2026-08-14). Restate the background on the hover state.
   Buttons with a DELIBERATE hover fill (__start, __yes, restore__btn,
   recover__btn) stay out of this list. */
.lbi-prof-magiclink__btn:hover,
.lbi-prof-magiclink__btn:focus,
.lbi-prof-magiclink__btn:active,
.lbi-prof-linkreset__open:hover,
.lbi-prof-linkreset__open:focus,
.lbi-prof-linkreset__open:active,
.lbi-prof-reset__open:hover,
.lbi-prof-reset__open:focus,
.lbi-prof-reset__open:active,
.lbi-prof-recover__toggle:hover,
.lbi-prof-recover__toggle:focus,
.lbi-prof-recover__toggle:active,
.lbi-prof-start__tour:hover,
.lbi-prof-start__tour:focus,
.lbi-prof-start__tour:active {
	/* The theme paints buttons green not only on :hover but on :focus/:active
	   too (the on-tap state on touch, where there is no hover). Suppressing only
	   :hover left these link-styled buttons accent-on-green on tap (Gerrit,
	   2026-09-14; extends the 2026-08-14 fix). */
	background: none;
}
.lbi-prof-linkreset__no:hover {
	background: transparent;
	border-color: var(--lp-muted);
	color: var(--lp-ink);
}

.lbi-prof-head__save {
	margin-top: .9rem;
	position: relative;
}

.lbi-prof-head__intro {
	margin: 0 0 .7rem;
	color: var(--lp-muted);
	font-size: .92rem;
	line-height: 1.5;
}

/* Privacy reassurance, demoted out of the intro to small print under the form:
   it answers an objection, it does not need to make the pitch. */
.lbi-prof-head__fine {
	margin: .7rem 0 0;
	color: var(--lp-muted);
	font-size: .78rem;
	line-height: 1.45;
	max-width: var(--lp-measure);
}

/* The capture form is bounded and left-read. Before Loud A the 34rem card
   bounded it; now the Overview panel is full width, so the email input would
   stretch the whole column without this. The quiet card (23rem) already bounds
   its own copy, so this is a no-op there. */
.lbi-prof-head__capture .lbi-prof-identity {
	max-width: 24rem;
	justify-content: flex-start;
}

/* ---- Band A, collapsed: the same band as page furniture -------------------
   Two states share this row shape (title left, identity or form right), for the
   same reason: the card is not worth its real estate here.

   is-saved  the address is on file, so the band has no pitch left to make.
   is-quiet  the pitch is still owed, but it is made once on Overview
             (Lbi_Profile_Bands::CAPTURE_VIEWS) and every other tab shrinks it
             to one line rather than repeating the card.

   Either way the tab content below starts near the top of the viewport instead
   of under a masthead. */
.lbi-prof-head.is-saved,
.lbi-prof-head.is-quiet {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: .35rem 1.5rem;
	max-width: none;
	margin: 0;
	padding: 0;
	text-align: left;
	background: none;
	border: 0;
	border-radius: 0;
	box-shadow: none;
}

.lbi-prof-head.is-saved .lbi-prof-head__title,
.lbi-prof-head.is-quiet .lbi-prof-head__title {
	font-size: clamp(1.3rem, 2.4vw, 1.55rem);
}

.lbi-prof-head.is-saved .lbi-prof-head__save {
	margin-top: 0;
	text-align: right;
}

/* Silent A: the quiet ask is a small bordered card pushed to the right of the
   title row; its label, form and fine print all read left inside it (M4). */
.lbi-prof-head.is-quiet .lbi-prof-head__save {
	margin-top: 0;
	margin-left: auto;
	max-width: 23rem;
	text-align: left;
}

.lbi-prof-head__savelabel {
	margin: 0 0 .4rem;
	font-weight: 700;
	font-size: .95rem;
}

/* The quiet ask: the same form, on one line, sized down to furniture. Wrapping
   stays on so the validation message keeps its own line (it is flex 1 1 100%)
   instead of being crushed in beside the input. */
.lbi-prof-head.is-quiet .lbi-prof-identity {
	justify-content: flex-start;
	gap: .5rem;
}

.lbi-prof-head.is-quiet .lbi-prof-identity__input {
	flex: 0 1 11rem;
	padding: .3rem .15rem;
	font-size: .9rem;
}

.lbi-prof-head.is-quiet .lbi-prof-identity__btn {
	padding: .35rem .85rem;
	font-size: .85rem;
}

.lbi-prof-head.is-quiet .lbi-prof-head__fine {
	margin: .45rem 0 0;
	font-size: .8rem;
	text-align: left;
	width: auto;
}

/* Confirmation + magic link on one line, separated by a middot. */
.lbi-prof-head.is-saved .lbi-prof-identity--saved {
	flex-direction: row;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: flex-end;
	gap: .15rem .55rem;
}

.lbi-prof-head.is-saved .lbi-prof-identity__done {
	font-size: .85rem;
	font-weight: 500;
	color: var(--lp-muted);
}

.lbi-prof-head.is-saved .lbi-prof-magiclink {
	margin-top: 0;
}

.lbi-prof-head.is-saved .lbi-prof-magiclink::before {
	content: "·";
	margin-right: .5rem;
	color: var(--lp-leader);
}
/* On a phone the row wraps and the separator sat alone on its own line
   (walkthrough 2026-09-03, finding 8). */
@media (max-width: 480px) {
	.lbi-prof-head.is-saved .lbi-prof-magiclink::before { content: none; }
}

/* Narrow: the row unstacks and everything left-aligns under the title, in step
   with the overview/next grids that collapse at 720 (Tier 2: retired the 700
   breakpoint so the header and grids stack together — no 700-720 dead band). */
@media (max-width: 720px) {
	.lbi-prof-head.is-saved,
	.lbi-prof-head.is-quiet {
		flex-direction: column;
		align-items: flex-start;
		gap: .5rem;
		margin-bottom: 0;
	}

	.lbi-prof-head.is-saved .lbi-prof-head__save,
	.lbi-prof-head.is-quiet .lbi-prof-head__save {
		text-align: left;
		width: 100%;
	}

	/* Silent A card fills the column under the title on a phone. */
	.lbi-prof-head.is-quiet .lbi-prof-head__save {
		max-width: none;
		margin-left: 0;
	}

	.lbi-prof-head.is-saved .lbi-prof-identity--saved,
	.lbi-prof-head.is-quiet .lbi-prof-identity {
		justify-content: flex-start;
	}

	.lbi-prof-head.is-quiet .lbi-prof-identity__input {
		flex: 1 1 auto;
	}
}

.lbi-prof-identity {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: .6rem;
}

/* Email input as a blank line on the document: underline only. */
.lbi-prof-identity__input {
	flex: 1 1 12rem;
	min-width: 0;
	padding: .55rem .15rem;
	border: 0;
	border-bottom: 2px dotted var(--lp-leader);
	border-radius: 0;
	font-size: 1rem;
	background: transparent;
	color: var(--lp-ink);
}
/* The verified-change code field: narrower than an email, revealed by JS. */
.lbi-prof-identity__code { flex: 0 1 9rem; letter-spacing: .12em; }
.lbi-prof-identity__code[hidden] { display: none; }

.lbi-prof-identity__input:focus {
	outline: none;
	border-bottom: 2px solid var(--lp-accent);
}

.lbi-prof-identity__input:focus-visible {
	box-shadow: 0 0 0 3px rgba(40, 195, 234, .25);
}

.lbi-prof-identity__btn {
	flex: 0 0 auto;
	padding: .6rem 1.25rem;
	border: 0;
	border-radius: var(--lp-radius);
	background: var(--lp-go);
	color: #fff;
	font-size: .95rem;
	font-weight: 600;
	cursor: pointer;
	transition: background .15s ease;
}

.lbi-prof-identity__btn:hover { background: var(--lp-go-deep); }
.lbi-prof-identity__btn:disabled { opacity: .6; cursor: default; }
.lbi-prof-identity__btn:focus-visible {
	outline: 2px solid var(--lp-accent-bright);
	outline-offset: 2px;
}

.lbi-prof-identity__msg {
	flex: 1 1 100%;
	margin: .1rem 0 0;
	font-size: .88rem;
	color: var(--lp-muted);
}

.lbi-prof-identity__msg.is-error { color: var(--lp-signal); }

.lbi-prof-identity--saved { flex-direction: column; align-items: center; gap: .55rem; }

.lbi-prof-identity__done {
	margin: 0;
	font-size: .92rem;
	font-weight: 600;
	color: var(--lp-go-deep);
	overflow-wrap: anywhere; /* a very long address wraps inside itself rather than overflowing */
}

/* Magic link: quiet request line under the saved confirmation. */
.lbi-prof-magiclink { margin-top: .15rem; }

/* "Not right? Change it" (0.62.0): same quiet mono link as the magic-link
   request, inline after the address; the form it opens reuses the capture
   input/button pair. */
.lbi-prof-identity__change {
	margin-left: .5rem;
	padding: 0;
	border: 0;
	background: none;
	font-family: var(--lp-mono);
	font-size: .72rem;
	letter-spacing: .06em;
	text-transform: none;
	color: var(--lp-accent);
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}
.lbi-prof-identity--change { margin-top: .5rem; }
.lbi-prof-identity--change[hidden] { display: none; }

/* A fresh trip that already has siblings renders the empty-state invite AND
   the Trip privacy footer; the recover disclosure closes the invite, so give
   the heading that follows room (Gerrit, 2026-08-23). */
.lq-dash > .lbi-prof-recover { margin-bottom: 1.75rem; }

.lbi-prof-magiclink__btn {
	padding: 0;
	border: 0;
	background: none;
	font-family: var(--lp-mono);
	font-size: .72rem;
	letter-spacing: .06em;
	color: var(--lp-accent);
	text-decoration: none;
	text-underline-offset: 3px;
	cursor: pointer;
}

.lbi-prof-magiclink__btn:hover { color: var(--lp-ink); text-decoration: underline; }
.lbi-prof-magiclink__btn:disabled { opacity: .6; cursor: default; text-decoration: none; }
.lbi-prof-magiclink__btn:focus-visible {
	outline: 2px solid var(--lp-accent-bright);
	outline-offset: 2px;
}

.lbi-prof-magiclink__msg {
	margin: .35rem 0 0;
	font-size: .85rem;
	color: var(--lp-muted);
}

.lbi-prof-magiclink__msg.is-error { color: var(--lp-signal); }

/* Relink arrival notices (magic-link redeem outcome). */
.lbi-prof-relink {
	margin: 0 0 .7rem;
	padding: .55rem .8rem;
	border-radius: var(--lp-radius);
	font-size: .9rem;
	line-height: 1.45;
}

.lbi-prof-relink.is-ok {
	color: var(--lp-go-deep);
	background: rgba(0, 133, 66, .07);
	border: 1px solid rgba(0, 133, 66, .25);
}

.lbi-prof-relink.is-expired {
	color: var(--lp-ink);
	background: rgba(192, 57, 43, .06);
	border: 1px solid rgba(192, 57, 43, .3);
}

/* ---- Trip recovery ------------------------------------------------------- */

/* "Reset my trip link": the standing link's off switch, sitting under the
   magic-link request line in the same quiet mono register. */
.lbi-prof-linkreset__open {
	display: block;
	margin-top: .3rem;
	padding: 0;
	border: 0;
	background: none;
	font-family: var(--lp-mono);
	font-size: .72rem;
	letter-spacing: .06em;
	color: var(--lp-muted);
	cursor: pointer;
}
.lbi-prof-linkreset__open:hover { color: var(--lp-signal); text-decoration: underline; }
.lbi-prof-linkreset__open:focus-visible,
.lbi-prof-linkreset__yes:focus-visible,
.lbi-prof-linkreset__no:focus-visible {
	outline: 2px solid var(--lp-accent-bright);
	outline-offset: 2px;
}
.lbi-prof-linkreset__msg {
	margin: 0 0 .5rem;
	font-size: .85rem;
	line-height: 1.45;
	color: var(--lp-muted);
}
.lbi-prof-linkreset__yes,
.lbi-prof-linkreset__no {
	padding: .35rem .85rem;
	border-radius: var(--lp-radius);
	font-size: .85rem;
	font-weight: 600;
	cursor: pointer;
}
.lbi-prof-linkreset__yes {
	border: 1px solid var(--lp-signal);
	background: var(--lp-signal);
	color: #fff;
}
.lbi-prof-linkreset__no {
	border: 1px solid var(--lp-leader);
	background: transparent;
	color: var(--lp-muted);
}

/* Recover by email: a small self-contained card. It has two homes with very
   different surroundings (the narrow identity column after an expired link, and
   the full-width empty state), so it sizes to whatever it is put in. */
.lbi-prof-recover {
	margin: .8rem 0 0;
	text-align: left;
}
.lbi-prof-recover__toggle {
	padding: 0;
	border: 0;
	background: none;
	font-family: var(--lp-mono);
	font-size: .74rem;
	letter-spacing: .06em;
	color: var(--lp-accent);
	cursor: pointer;
}
.lbi-prof-recover__toggle:hover { color: var(--lp-ink); text-decoration: underline; }
/* In the Trip privacy footer the toggle sits under "Reset my trip link" and
   "Start over", so it dresses like them (the outlined .lbi-prof-reset__start
   button) rather than as the mono text link it is inside the header notice
   (Gerrit's mobile walkthrough, 2026-08-28). */
.lbi-prof-recover-footer .lbi-prof-recover__toggle {
	display: inline-block;
	width: auto;
	text-align: left;
	padding: .5rem 1.15rem;
	border: 1px solid var(--lp-accent);
	border-radius: var(--lp-radius);
	background: transparent;
	color: var(--lp-accent);
	font-family: inherit;
	font-size: .92rem;
	font-weight: 600;
	letter-spacing: normal;
}
.lbi-prof-recover-footer .lbi-prof-recover__toggle:hover {
	background: var(--lp-accent);
	color: #fff;
	text-decoration: none;
}
/* The adopt button's failure reason (profile.js initUseSuggestion). */
.lbi-prof-fact__usemsg,
.tc-sheet__source .lbi-prof-fact__usemsg {
	color: #b3261e;
	font-weight: 600;
}
.lbi-prof-recover__toggle:focus-visible,
.lbi-prof-recover__btn:focus-visible {
	outline: 2px solid var(--lp-accent-bright);
	outline-offset: 2px;
}
.lbi-prof-recover__lead {
	margin: 0 0 .6rem;
	font-size: .9rem;
	line-height: 1.5;
	color: var(--lp-muted);
}
/* The device-bound restore, when a start-over slot is live: first option in
   the disclosure, separated from the email path below by a quiet rule. */
.lbi-prof-recover__device {
	margin: 0 0 .9rem;
	padding: 0 0 .9rem;
	border-bottom: 1px solid var(--lp-leader);
}
.lbi-prof-recover__device .lbi-prof-restore__msg { margin: .4rem 0 0; }
.lbi-prof-recover__device .lbi-prof-reset--inline { margin-top: .7rem; }
.lbi-prof-recover__form,
.lbi-prof-recover__codeform {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .6rem;
}
.lbi-prof-recover__codeform { margin-top: .7rem; }
.lbi-prof-recover__input,
.lbi-prof-recover__codeinput {
	flex: 1 1 10rem;
	min-width: 0;
	padding: .5rem .15rem;
	border: 0;
	border-bottom: 2px dotted var(--lp-leader);
	border-radius: 0;
	font-size: 1rem;
	background: transparent;
	color: var(--lp-ink);
}
.lbi-prof-recover__codeinput {
	flex: 0 0 auto;
	font-family: var(--lp-mono);
}
.lbi-prof-recover__input:focus,
.lbi-prof-recover__codeinput:focus {
	outline: none;
	border-bottom: 2px solid var(--lp-accent);
}
.lbi-prof-recover__codelabel {
	flex: 1 1 100%;
	font-family: var(--lp-mono);
	font-size: .7rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--lp-muted);
}
.lbi-prof-recover__btn {
	flex: 0 0 auto;
	padding: .5rem 1.05rem;
	border: 0;
	border-radius: var(--lp-radius);
	background: var(--lp-go);
	color: #fff;
	font-size: .9rem;
	font-weight: 600;
	cursor: pointer;
}
.lbi-prof-recover__btn:hover { background: var(--lp-go-deep); }
.lbi-prof-recover__btn:disabled { opacity: .6; cursor: default; }
.lbi-prof-recover__msg {
	flex: 1 1 100%;
	margin: .35rem 0 0;
	font-size: .87rem;
	line-height: 1.45;
	color: var(--lp-muted);
}
.lbi-prof-recover__msg.is-error { color: var(--lp-signal); }
.lbi-prof-recover__fine {
	margin: .6rem 0 0;
	font-size: .78rem;
	line-height: 1.45;
	color: var(--lp-muted);
}

/* The two relink questions (replace-what-is-here, reset-this-link). Rendered
   above everything else on the page, so they read as an interruption rather
   than as one more card in the stack. */
.lbi-prof-choice {
	margin: 0 0 1.5rem;
	border-left: 3px solid var(--lp-accent);
}
.lbi-prof-choice__title {
	margin: 0 0 .5rem;
	font-size: 1.1rem;
	font-weight: 700;
	line-height: 1.3;
	color: var(--lp-ink);
}
.lbi-prof-choice__copy {
	margin: 0 0 .9rem;
	font-size: .95rem;
	line-height: 1.55;
	color: var(--lp-muted);
	max-width: var(--lp-measure);
}
.lbi-prof-choice__actions {
	display: flex;
	flex-wrap: wrap;
	gap: .6rem;
}
/* The ghost action is an <a> in one card and a <button> in the other. Pierce's
   .content a (0,1,1) beats a lone class on link COLOR and paints the theme's
   gradient marker behind it, so the <a> needs the ancestor bump to look like
   its <button> twin. No !important: .lbi-prof-choice .x is 0,2,0. */
.lbi-prof-choice .lbi-prof-choice__btn {
	display: inline-block;
	padding: .5rem 1.1rem;
	border: 1px solid var(--lp-go);
	border-radius: var(--lp-radius);
	background: var(--lp-go);
	background-image: none;
	color: #fff;
	font-size: .92rem;
	font-weight: 600;
	line-height: 1.3;
	text-decoration: none;
	text-transform: none;
	letter-spacing: normal;
	cursor: pointer;
}
.lbi-prof-choice .lbi-prof-choice__btn:hover {
	background: var(--lp-go-deep);
	border-color: var(--lp-go-deep);
	color: #fff;
	text-decoration: none;
}
.lbi-prof-choice .lbi-prof-choice__btn--ghost {
	background: transparent;
	background-image: none;
	border-color: var(--lp-leader);
	color: var(--lp-muted);
}
.lbi-prof-choice .lbi-prof-choice__btn--ghost:hover {
	background: transparent;
	border-color: var(--lp-muted);
	color: var(--lp-ink);
}
.lbi-prof-choice__btn:disabled { opacity: .6; cursor: default; }
.lbi-prof-choice__btn:focus-visible {
	outline: 2px solid var(--lp-accent-bright);
	outline-offset: 2px;
}
.lbi-prof-choice__msg {
	margin: .7rem 0 0;
	font-size: .88rem;
	color: var(--lp-muted);
}
.lbi-prof-choice__msg.is-error { color: var(--lp-signal); }

/* ---- Relink modal + sticky bar (option C, 2026-09-22) ----------------------
   The "open your saved trip" question as a modal over the dashboard, with a
   sticky-bar fallback once it is dismissed or the visitor arrives on a later
   tab. profile.js (initRelinkModal) owns open/close, the focus trap, the pulse
   and the expiry; this is the chrome. */
body.lbi-relinkmodal-open { overflow: hidden; }

.lbi-profile .lbi-prof-relinkmodal {
	position: fixed;
	inset: 0;
	z-index: 1000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
	opacity: 0;
	transition: opacity .2s ease;
}
/* The scoped display:flex above outranks the UA `[hidden]{display:none}`, so a
   hidden (closed) modal would otherwise keep its full-screen backdrop over the
   page and swallow every click. Restate the hide at higher specificity. */
.lbi-profile .lbi-prof-relinkmodal[hidden] { display: none; }
.lbi-profile .lbi-prof-relinkmodal.is-open { opacity: 1; }
.lbi-profile .lbi-prof-relinkmodal__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(15, 23, 32, .55);
}
.lbi-profile .lbi-prof-relinkmodal__dialog {
	position: relative;
	width: 100%;
	max-width: 26rem;
	background: var(--lp-paper, #fffefb);
	border-radius: var(--lp-radius, 6px);
	box-shadow: 0 12px 40px rgba(0, 0, 0, .28);
	padding: 1.4rem 1.3rem 1.2rem;
	transform: translateY(8px);
	transition: transform .2s ease;
}
.lbi-profile .lbi-prof-relinkmodal.is-open .lbi-prof-relinkmodal__dialog { transform: translateY(0); }
.lbi-profile .lbi-prof-relinkmodal__dialog:focus { outline: none; }
/* The dialog IS the paper; the choice card's own raised surface is redundant inside it. */
.lbi-profile .lbi-prof-relinkmodal__dialog .lbi-prof-choice {
	margin: 0;
	border: 0;
	box-shadow: none;
	padding: 0;
}
.lbi-profile .lbi-prof-relinkmodal__close {
	position: absolute;
	top: .4rem;
	right: .4rem;
	width: 2rem;
	height: 2rem;
	border: 0;
	background: transparent;
	color: var(--lp-muted, #5b6b78);
	font-size: 1.5rem;
	line-height: 1;
	cursor: pointer;
	border-radius: 6px;
}
.lbi-profile .lbi-prof-relinkmodal__close:hover { color: var(--lp-ink, #1a2730); background: rgba(0, 0, 0, .05); }
@media (prefers-reduced-motion: reduce) {
	.lbi-profile .lbi-prof-relinkmodal,
	.lbi-profile .lbi-prof-relinkmodal__dialog { transition: none; transform: none; }
}

.lbi-profile .lbi-prof-relinkbar[hidden] { display: none; }
.lbi-profile .lbi-prof-relinkbar {
	position: sticky;
	/* Below the theme's fixed header (z-index 999), not under it: the same
	   published header offset the survey/notice scroll-margins use (Sol PR C). */
	top: calc(var(--lbi-admin-h, 0px) + var(--lbi-bar-h, 52px));
	z-index: 900;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .8rem;
	flex-wrap: wrap;
	margin: 0 0 1rem;
	padding: .7rem 1rem;
	background: rgba(0, 133, 66, .08);
	border: 1px solid var(--lp-go, #008542);
	border-radius: var(--lp-radius, 6px);
}
.lbi-profile .lbi-prof-relinkbar__text { margin: 0; font-size: .95rem; color: var(--lp-ink, #1a2730); }
.lbi-profile .lbi-prof-relinkbar__btn {
	padding: .4rem 1rem;
	border: 1px solid var(--lp-go, #008542);
	border-radius: var(--lp-radius, 6px);
	background: var(--lp-go, #008542);
	background-image: none;
	color: #fff;
	font-size: .9rem;
	font-weight: 600;
	text-transform: none;
	letter-spacing: normal;
	cursor: pointer;
}
.lbi-profile .lbi-prof-relinkbar__btn:hover { background: var(--lp-go-deep, #007033); border-color: var(--lp-go-deep, #007033); }

/* Pulse the primary button 3 short beats when the modal opens — attention only. */
@keyframes lbi-relink-pulse {
	0%, 100% { box-shadow: 0 0 0 0 rgba(0, 133, 66, 0); }
	30%      { box-shadow: 0 0 0 6px rgba(0, 133, 66, .28); }
	60%      { box-shadow: 0 0 0 0 rgba(0, 133, 66, 0); }
}
.lbi-profile .lbi-prof-choice__btn.is-pulsing { animation: lbi-relink-pulse .8s ease-out 3; }
@media (prefers-reduced-motion: reduce) {
	.lbi-profile .lbi-prof-choice__btn.is-pulsing { animation: none; }
}

/* The delete's confirmation-code field (R4), revealed only when the server
   asks for one. */
.lbi-prof-reset__code {
	margin: .6rem 0 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .5rem;
}
.lbi-prof-reset__codelabel {
	font-family: var(--lp-mono);
	font-size: .7rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--lp-muted);
}
.lbi-prof-reset__codeinput {
	width: 7rem;
	padding: .4rem .15rem;
	border: 0;
	border-bottom: 2px dotted var(--lp-leader);
	border-radius: 0;
	background: transparent;
	font-family: var(--lp-mono);
	font-size: 1rem;
	letter-spacing: .3em;
	color: var(--lp-ink);
}
.lbi-prof-reset__codeinput:focus {
	outline: none;
	border-bottom: 2px solid var(--lp-accent);
}


/* ---- Start over: the reversible reset, and its undo ---------------------- */

/* The footer block now leads with a product control and keeps the privacy one
   underneath it as a quiet text link — the split, made visible. */
.lbi-prof-reset__lead {
	margin: 0 0 .6rem;
	font-size: .88rem;
	line-height: 1.5;
	color: var(--lp-muted);
	max-width: var(--lp-measure);
}
/* The blue outlined control shared across Trip privacy: Start over, the
   other-trips Open/Change switch, and the saved-notice buttons (harmonized
   0.95.0, R2). Row buttons override padding/font-size below to stay compact;
   colour, border and the hover fill are owned here. This rule sits earlier in
   the file, so those later per-button rules win on the properties they still
   declare (padding, font-size) at equal specificity. */
.lbi-prof-reset__start,
.lbi-prof-othertrips__switch,
.lbi-prof-savednote__btn {
	padding: .5rem 1.15rem;
	border: 1px solid var(--lp-accent);
	border-radius: var(--lp-radius);
	background: transparent;
	color: var(--lp-accent);
	font-size: .92rem;
	font-weight: 600;
	cursor: pointer;
}
.lbi-prof-reset__start:hover,
.lbi-prof-othertrips__switch:hover,
.lbi-prof-savednote__btn:hover { background: var(--lp-accent); color: #fff; }
.lbi-prof-reset__start:focus-visible,
.lbi-prof-othertrips__switch:focus-visible,
.lbi-prof-savednote__btn:focus-visible {
	outline: 2px solid var(--lp-accent-bright);
	outline-offset: 2px;
}
/* The permanent delete lives inside the start-over confirm (0.43.0), separated
   by a hairline so the reversible pair above and the destructive path below
   never read as a set of three equal buttons. */
.lbi-prof-reset__deletehome {
	margin-top: 1rem;
	padding-top: .8rem;
	border-top: 1px solid var(--lp-rule);
}
.lbi-prof-reset__msg--quiet {
	margin: 0 0 .15rem;
	font-size: .82rem;
	color: var(--lp-muted);
}
.lbi-prof-reset__open { margin-top: .1rem; }
.lbi-prof-reset--inline { margin-top: .9rem; }

/* The undo. Two shapes from one component: a loud banner straight after the
   clear, and a quieter standing notice on later visits. */
.lbi-prof-restore {
	margin: 0 0 1.5rem;
	border-left: 3px solid var(--lp-accent);
}
.lbi-prof-restore.is-banner {
	border-left-color: var(--lp-go);
	box-shadow: var(--lp-shadow);
}
.lbi-prof-restore__title {
	margin: 0 0 .5rem;
	font-size: 1.1rem;
	font-weight: 700;
	line-height: 1.3;
	color: var(--lp-ink);
}
.lbi-prof-restore__copy {
	margin: 0 0 .9rem;
	font-size: .95rem;
	line-height: 1.55;
	color: var(--lp-muted);
	max-width: var(--lp-measure);
}
.lbi-prof-restore__actions {
	display: flex;
	flex-wrap: wrap;
	gap: .6rem;
}
.lbi-prof-restore__btn {
	padding: .5rem 1.1rem;
	border: 1px solid var(--lp-go);
	border-radius: var(--lp-radius);
	background: var(--lp-go);
	color: #fff;
	font-size: .92rem;
	font-weight: 600;
	cursor: pointer;
}
.lbi-prof-restore__btn:hover { background: var(--lp-go-deep); border-color: var(--lp-go-deep); }
.lbi-prof-restore__btn:disabled { opacity: .6; cursor: default; }
.lbi-prof-restore__btn:focus-visible {
	outline: 2px solid var(--lp-accent-bright);
	outline-offset: 2px;
}
.lbi-prof-restore__btn--ghost {
	background: transparent;
	border-color: var(--lp-leader);
	color: var(--lp-muted);
}
.lbi-prof-restore__btn--ghost:hover {
	background: transparent;
	border-color: var(--lp-muted);
	color: var(--lp-ink);
}
.lbi-prof-restore__msg {
	margin: .7rem 0 0;
	font-size: .88rem;
	color: var(--lp-muted);
}
.lbi-prof-restore__msg.is-error { color: var(--lp-signal); }

/* ---- Band B: the trip sheet ---------------------------------------------- */
.lbi-prof-spine {
	display: grid;
	grid-template-columns: 1.7fr 1fr;
	gap: clamp(1.25rem, 3vw, 2.5rem);
}

.lbi-prof-spine__title {
	font-family: var(--lp-mono);
	font-size: .72rem;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--lp-ink);
	font-weight: 700;
	margin: 0 0 .5rem;
}

.lbi-prof-spine__lead {
	margin: 0 0 1rem;
	font-size: .9rem;
	line-height: 1.5;
	color: var(--lp-muted);
}

/* The fact rows. Grid per row: label | dotted leader | value, with an optional
   provenance caption right-aligned beneath the value. */
.lbi-prof-facts {
	margin: 0;
	display: flex;
	flex-direction: column;
}

.lbi-prof-fact {
	margin: 0;
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: baseline;
	column-gap: .65rem;
	padding: .6rem 0 .5rem;
	border-bottom: 1px solid transparent;
}

.lbi-prof-fact__label {
	font-family: var(--lp-mono);
	font-size: .7rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--lp-muted);
	margin: 0;
	white-space: nowrap;
}

.lbi-prof-fact__leader {
	margin: 0;
	border-bottom: 2px dotted var(--lp-leader);
	transform: translateY(-.28em);
}

.lbi-prof-fact__value {
	margin: 0;
	font-size: 1.02rem;
	font-weight: 600;
	color: var(--lp-ink);
	line-height: 1.35;
	text-align: right;
	max-width: 32ch;
}

/* Hierarchy pass, Trip details first (Gerrit, 2026-08-14): the settled values
   ARE the page's content, so on the real sheet (the .lbi-prof-facts dl — never
   the ghost preview or the drawer's mini sheet, which reuse the row markup at
   ambient scale) they step up a full size while every mono label around them
   stays at whisper volume. Open rows step back DOWN to the ambient size so the
   contrast between decided and undecided does the scanning work. */
.lbi-prof-facts .lbi-prof-fact__value {
	font-size: 1.22rem;
	font-weight: 700;
	letter-spacing: -.01em;
}

.lbi-prof-facts .lbi-prof-fact.is-open .lbi-prof-fact__value {
	font-size: .95rem;
}

/* Provenance caption: where this fact came from. Sits under the value, in the
   document's mono voice; estimates read quieter still (italic). */
.lbi-prof-fact__source {
	grid-column: 3;
	margin: .1rem 0 0;
	font-family: var(--lp-mono);
	font-size: .66rem;
	letter-spacing: .04em;
	line-height: 1.3;
	color: var(--lp-muted);
	text-align: right;
}

.lbi-prof-fact__source.is-estimated {
	font-style: italic;
	opacity: .85;
}

/* Cross-source disagreement: two producers gave different values for this fact.
   The caption names both, in a quiet signal tone; never an interruption. */
.lbi-prof-fact.is-conflict .lbi-prof-fact__source {
	color: var(--lp-signal);
	opacity: .9;
}

/* The caption's one-tap adopt: a text button in the caption's own size, styled
   as an action (underline) so it reads apart from the passive clause before it.
   text-transform guards against the theme's uppercase sweep on buttons. */
.lbi-prof-fact__use {
	margin: 0 0 0 .35em;
	padding: 0;
	border: 0;
	background: none;
	font-family: inherit;
	font-size: inherit;
	letter-spacing: inherit;
	text-transform: none;
	color: var(--lp-go-deep, #1d6a4f);
	text-decoration: underline;
	cursor: pointer;
}

.lbi-prof-fact__use:disabled {
	opacity: .6;
	cursor: default;
	text-decoration: none;
}

/* "Keep my answer" (0.74.6): the quieter of the pair, in the caption's own
   ink so "Use this instead" stays the one that reads as the change. */
.lbi-prof-fact__keep {
	color: inherit;
	opacity: .85;
}

/* Still-open rows: the sheet's blank lines. Value goes quiet and unweighted so
   decided facts visibly outrank open ones. */
.lbi-prof-fact.is-open .lbi-prof-fact__value {
	font-weight: 400;
	font-style: italic;
	color: var(--lp-muted);
}

.lbi-prof-fact.is-open .lbi-prof-fact__label {
	opacity: .7;
}

/* The rail: how to firm up the open lines. */
.lbi-prof-spine__more {
	border-left: 1px solid var(--lp-rule);
	padding-left: clamp(1.25rem, 3vw, 2.25rem);
}

/* Rail alone (0.75.2): the calculator's "Your trip" sheet suppresses the fact
   list via lbi_profile_spine_facts_enabled, leaving the rail as the grid's only
   child. The rule and padding above are the divider between the two columns;
   with no facts column they read as a stray indent, so drop them and let the
   rail take the whole row. */
.lbi-prof-spine__more:first-child {
	border-left: 0;
	padding-left: 0;
}
.lbi-prof-spine:has(> .lbi-prof-spine__more:first-child) {
	grid-template-columns: 1fr;
}

.lbi-prof-invites { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .55rem; }

/* The theme styles .entry-content ul (margins) and .entry-content ul > li
   (disc markers) more specifically than the bare class above; re-assert the
   reset at matching specificity so invites never grow bullets or indents. */
.entry-content .lbi-prof-invites { list-style: none; margin: 0; padding: 0; }
.entry-content .lbi-prof-invites > li,
.lbi-prof-invites > li { list-style: none; margin: 0; padding: 0; }

.lbi-prof-invite__link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .75rem;
	padding: .7rem .9rem;
	border: 1px solid var(--lp-rule);
	border-radius: var(--lp-radius);
	text-decoration: none;
	color: var(--lp-ink);
	transition: border-color .15s ease, background .15s ease;
}

.lbi-prof-invite__link:hover {
	border-color: var(--lp-accent);
	background: rgba(0, 112, 139, .04);
}

.lbi-prof-invite__link:focus-visible {
	outline: 2px solid var(--lp-accent-bright);
	outline-offset: 2px;
}

.lbi-prof-invite__text {
	display: flex;
	flex-direction: column;
	gap: .15rem;
	min-width: 0;
}

.lbi-prof-invite__label {
	font-weight: 600;
	font-size: .95rem;
	line-height: 1.3;
}

.lbi-prof-invite__benefit {
	font-size: .82rem;
	line-height: 1.4;
	color: var(--lp-muted);
}

.lbi-prof-invite__arrow { color: var(--lp-accent); flex: 0 0 auto; }

/* Benefit-first rows (the dashboard empty state and the drawer's first visit).
   The PHP emits the two lines in reading order, so this only has to move the
   emphasis: what the visitor gets leads, the quiz's name captions it. */
.lbi-prof-invites--benefit-first .lbi-prof-invite__benefit {
	order: 0;
	font-size: .95rem;
	font-weight: 600;
	line-height: 1.3;
	color: var(--lp-ink);
}

.lbi-prof-invites--benefit-first .lbi-prof-invite__label {
	order: 1;
	font-size: .8rem;
	font-weight: 400;
	line-height: 1.4;
	color: var(--lp-muted);
}

/* ---- Results zone: quiet spacing around the demoted quiz cards ----------- */
.lbi-profile__zone--results { gap: .75rem; }

.lbi-prof-before__intro {
	margin: 0 0 .85rem;
	font-size: .9rem;
	color: var(--lp-muted);
	max-width: var(--lp-measure);
}

/* "Up next" heading over the still-to-take trip quizzes (Gerrit, 2026-09-13):
   a mono kicker in the dashboard's label style, so the list reads as a labelled
   next step rather than a loose paragraph. */
.lbi-prof-before__kicker {
	display: inline-block;
	margin-bottom: .4rem;
	font-family: var(--lp-mono);
	font-size: .68rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--lp-muted);
}

/* Un-mute the untaken trip-quiz cards: give them the paper fill the taken result
   tickets carry, so they read as cards to act on instead of a recessed
   transparent box on the white content ground (Gerrit, 2026-09-13). Scoped to
   the trip tail; the fun-quiz "Before you go" aside stays deliberately quiet. */
.lbi-prof-before--trip .lbi-prof-invite__link { background: var(--lp-paper); }

/* ---- Band D: keep planning (titled by its zone group) --------------------- */
.lbi-prof-next__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
	gap: var(--lp-gap);
}

.lbi-prof-next__card {
	display: flex;
	flex-direction: column;
	gap: .3rem;
	text-decoration: none;
	transition: border-color .15s ease, background .15s ease;
}

.lbi-prof-next__card:hover {
	border-color: var(--lp-accent);
	background: rgba(0, 112, 139, .04);
}

.lbi-prof-next__card:focus-visible {
	outline: 2px solid var(--lp-accent-bright);
	outline-offset: 2px;
}

.lbi-prof-next__cardtitle { font-weight: 700; color: var(--lp-ink); font-size: 1rem; }
.lbi-prof-next__carddesc { color: var(--lp-muted); font-size: .9rem; }

/* ---- The calculator's "Your trip" block, dressed as the trip sheet -------- */
/* The read sheet (.tc-sheet) and estimate card (.tc-est) carry no class of ours,
   so their .lbi-profile-scoped selectors ride along in the .lbi-prof-card and
   .lbi-prof-card--sheet lists above (Tier 2, 2026-09-17): same paper box, ink top
   rule and lift as the other document sheets, so all three calculator cards share
   one left edge and the ink top rule (audit H5). The standalone override that
   used to live here was folded into the primitive. */

/* Only the read sheet is "the document"; the edit card stays a quiet card. */
.lbi-profile .tc-sheet--edit {
	border-top: 1px solid var(--lp-rule);
	box-shadow: none;
}

.lbi-profile .tc-sheet__readout {
	display: flex;
	flex-direction: column;
	margin: 0;
}

.lbi-profile .tc-sheet__ro {
	display: flex;
	align-items: baseline;
	gap: .65rem;
	margin: 0;
	padding: .6rem 0 .5rem;
}

.lbi-profile .tc-sheet__ro-label {
	display: flex;
	flex: 1 1 auto;
	align-items: baseline;
	gap: .65rem;
	font-family: var(--lp-mono);
	font-size: .7rem;
	font-weight: 400;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--lp-muted);
	white-space: nowrap;
}

/* The dotted leader, drawn by the label so no extra markup is needed. */
.lbi-profile .tc-sheet__ro-label::after {
	content: '';
	flex: 1;
	min-width: 2rem;
	border-bottom: 2px dotted var(--lp-leader);
	transform: translateY(-.28em);
}

.lbi-profile .tc-sheet__ro-value {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	margin: 0;
	font-size: 1.02rem;
	font-weight: 600;
	color: var(--lp-ink);
	line-height: 1.35;
	text-align: right;
	max-width: 32ch;
}

.lbi-profile .tc-sheet__source {
	font-family: var(--lp-mono);
	font-size: .66rem;
	font-weight: 400;
	letter-spacing: .04em;
	color: var(--lp-muted);
}

.lbi-profile .tc-sheet__source.is-estimated {
	font-style: italic;
	opacity: .85;
}

@media (max-width: 720px) {
	.lbi-profile .tc-sheet__ro-label::after { display: none; }
	.lbi-profile .tc-sheet__ro {
		border-bottom: 1px dotted var(--lp-leader);
	}
	.lbi-profile .tc-sheet__ro:last-child { border-bottom: 0; }
}

/* ---- Footer: self-serve data delete --------------------------------------- */
/* Trip privacy footer (0.53.0): the link-reset block sits above the clean-slate
   block, same voice, same controls; the group title above them names the
   cluster on the overview. Since 0.95.0 they are SEPARATE footer sections
   (profile-linkreset before profile-reset); their gap — and every other footer
   subsection gap — is the single inter-section rhythm rule in the footer-zone
   block below, not per-block padding here (R5). */

.lbi-prof-reset__open {
	padding: 0;
	border: 0;
	background: none;
	font-family: var(--lp-mono);
	font-size: .72rem;
	letter-spacing: .06em;
	color: var(--lp-muted);
	text-decoration: none;
	text-underline-offset: 3px;
	cursor: pointer;
}

.lbi-prof-reset__open:hover { color: var(--lp-signal); text-decoration: underline; }
.lbi-prof-reset__open:focus-visible,
.lbi-prof-reset__yes:focus-visible,
.lbi-prof-reset__no:focus-visible {
	outline: 2px solid var(--lp-accent-bright);
	outline-offset: 2px;
}

.lbi-prof-reset__msg {
	margin: 0 0 .7rem;
	font-size: .88rem;
	color: var(--lp-ink);
	max-width: var(--lp-measure);
}

.lbi-prof-reset__yes,
.lbi-prof-reset__no {
	padding: .45rem 1rem;
	margin-right: .5rem;
	border-radius: var(--lp-radius);
	font-size: .88rem;
	font-weight: 600;
	cursor: pointer;
}

.lbi-prof-reset__yes {
	border: 1px solid var(--lp-signal);
	background: var(--lp-signal);
	color: #fff;
}
.lbi-prof-reset__yes:hover {
	border-color: var(--lp-signal-deep);
	background: var(--lp-signal-deep);
}

/* "Keep my trip" never had a base of its own, so it wore the theme's solid
   green button at rest AND on hover. Ghost shape, same as linkreset__no. */
.lbi-prof-reset__no {
	border: 1px solid var(--lp-leader);
	background: transparent;
	color: var(--lp-muted);
}
.lbi-prof-reset__no:hover {
	background: transparent;
	border-color: var(--lp-muted);
	color: var(--lp-ink);
}

.lbi-prof-reset__yes:disabled,
.lbi-prof-reset__no:disabled { opacity: .6; cursor: default; }

/* The destructive confirm borrows .lbi-prof-restore's notice grammar (paper,
   hairline border, 3px left border carrying the meaning) instead of floating a
   lone red button on the page. Framed, the solid fill reads as the weight of the
   action rather than as an OS alert. The START OVER confirm deliberately does NOT
   get this: the two must never read as a pair of equal choices. */
.lbi-prof-reset__confirm--danger {
	margin-top: .7rem;
	padding: .9rem 1rem;
	border: 1px solid var(--lp-rule);
	border-left: 3px solid var(--lp-signal);
	border-radius: var(--lp-radius);
	background: var(--lp-signal-soft);
}

/* The terminal panel after a successful delete. It REPLACES the whole reset
   block, so "Start over" goes with it: there is nothing left to start over. */
.lbi-prof-reset__done {
	border-left: 3px solid var(--lp-signal);
}
.lbi-prof-reset__donetitle {
	margin: 0 0 .5rem;
	font-size: 1.1rem;
	font-weight: 700;
	line-height: 1.3;
	color: var(--lp-ink);
}
.lbi-prof-reset__donetitle:focus-visible {
	outline: 2px solid var(--lp-accent-bright);
	outline-offset: 3px;
}
.lbi-prof-reset__donecopy {
	margin: 0 0 .9rem;
	font-size: .95rem;
	line-height: 1.55;
	color: var(--lp-muted);
}
.lbi-prof-reset__donebtn {
	padding: .5rem 1.1rem;
	border: 1px solid var(--lp-accent);
	border-radius: var(--lp-radius);
	background: transparent;
	color: var(--lp-accent);
	font-size: .92rem;
	font-weight: 600;
	cursor: pointer;
}
.lbi-prof-reset__donebtn:hover { background: var(--lp-accent); color: #fff; }
.lbi-prof-reset__donebtn:focus-visible {
	outline: 2px solid var(--lp-accent-bright);
	outline-offset: 2px;
}

/* ---- Early-access feedback band (Overview tab only) ----------------------- */
/* Promoted (0.75.1, Gerrit 2026-09-07: "I really would like feedback"): a
   stronger tint, a left accent bar and a pill kicker so the ask reads as its
   own card, not as one more paragraph. It still sits below the ocards. */
/* Two "Early access" cards on the page background, the band between them
   (Gerrit, 2026-09-13): the ask first, the survey second. The outer element
   stays the JS root; it is now only a spacer, and __card carries the panel. */
.lbi-prof-feedback { display: flex; flex-direction: column; gap: var(--lp-gap); }
.lbi-prof-feedback__card {
	background: linear-gradient( 135deg, rgba(0, 112, 139, .10), rgba(40, 195, 234, .05) 60%, var(--lp-paper) );
	border: 1px solid rgba(0, 112, 139, .28);
	border-left: 5px solid var(--lp-accent);
	border-radius: var(--lp-radius);
	padding: clamp(1.1rem, 3vw, 1.6rem);
	box-shadow: 0 6px 18px -12px rgba(0, 112, 139, .45);
}

.lbi-prof-feedback__kicker {
	display: inline-block;
	margin-bottom: .55rem;
	padding: .18em .6em;
	border-radius: 999px;
	background: var(--lp-accent);
	font-family: var(--lp-mono);
	font-size: .66rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: #fff;
}

/* Was demoted to .98rem in the hierarchy pass (tertiary on Overview). Raised
   to sit between the ocard titles and body copy now that the ask is wanted. */
.lbi-prof-feedback__title {
	margin: 0 0 .3rem;
	font-size: 1.15rem;
	line-height: 1.3;
	font-weight: 700;
	color: var(--lp-ink);
}

.lbi-prof-feedback__lead {
	margin: 0 0 .9rem;
	font-size: .9rem;
	line-height: 1.5;
	color: var(--lp-muted);
}

.lbi-prof-feedback__question {
	margin: 0;
	font-size: .95rem;
	line-height: 1.5;
	color: var(--lp-ink);
}

/* The binary tap: two text buttons (no glyphs), the chosen one filling in.
   Deliberately NOT the quiz look — only the survey options below take that
   (Gerrit's ruling 2026-09-13, reversing the 0.85.0 restyle of this pair). */
.lbi-prof-feedback__rate {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: .55rem;
	margin-top: .8rem;
}

.lbi-prof-feedback__ratebtn {
	padding: .42rem 1.05rem;
	border: 1px solid var(--lp-accent);
	border-radius: var(--lp-radius);
	background: var(--lp-paper);
	color: var(--lp-accent);
	font-size: .9rem;
	font-weight: 600;
	cursor: pointer;
	transition: background .15s ease, color .15s ease, border-color .15s ease;
}

.lbi-prof-feedback__ratebtn:hover { background: rgba(0, 112, 139, .08); }
.lbi-prof-feedback__ratebtn:focus-visible { outline: 2px solid var(--lp-accent-bright); outline-offset: 2px; }
.lbi-prof-feedback__ratebtn.is-chosen {
	background: var(--lp-accent);
	border-color: var(--lp-accent);
	color: #fff;
}

/* The follow-up prompt, worded to the visitor's trip, above the note field. */
.lbi-prof-feedback__prompt {
	margin: 0 0 .55rem;
	font-size: .9rem;
	line-height: 1.5;
	font-weight: 600;
	color: var(--lp-ink);
}

.lbi-prof-feedback__intro-copy {
	margin: .35rem 0 .75rem;
	color: var(--lp-ink);
	font-size: .95rem;
	line-height: 1.5;
	max-width: var(--lp-measure);
}
.lbi-prof-recs__lead {
	margin: 0 0 .9rem;
	color: var(--lp-muted);
	font-size: .95rem;
	line-height: 1.5;
	max-width: var(--lp-measure);
}
.lbi-prof-feedback__form { margin: .85rem 0 0; }
.lbi-prof-feedback__form[hidden] { display: none; }

.lbi-prof-feedback__input {
	display: block;
	width: 100%;
	box-sizing: border-box;
	min-height: 4.5rem;
	padding: .65rem .8rem;
	border: 1px solid var(--lp-rule);
	border-radius: var(--lp-radius);
	background: var(--lp-paper);
	color: var(--lp-ink);
	font: inherit;
	font-size: .95rem;
	line-height: 1.5;
	resize: vertical;
}

.lbi-prof-feedback__input:focus-visible {
	outline: 2px solid var(--lp-accent-bright);
	outline-offset: 1px;
	border-color: var(--lp-accent);
}

/* Honeypot: kept in the DOM for the JS to read, never seen or focusable. */
.lbi-prof-feedback__hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.lbi-prof-feedback__actions {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: .75rem;
	margin-top: .7rem;
}

.lbi-prof-feedback__btn {
	padding: .5rem 1.1rem;
	border: 1px solid var(--lp-accent);
	border-radius: var(--lp-radius);
	background: var(--lp-accent);
	color: #fff;
	font-size: .9rem;
	font-weight: 600;
	cursor: pointer;
	transition: background .15s ease, border-color .15s ease;
}

.lbi-prof-feedback__btn:hover { background: #005e75; border-color: #005e75; }
.lbi-prof-feedback__btn:focus-visible { outline: 2px solid var(--lp-accent-bright); outline-offset: 2px; }
.lbi-prof-feedback__btn:disabled { opacity: .6; cursor: default; }

.lbi-prof-feedback__msg {
	margin: 0;
	font-size: .85rem;
	color: var(--lp-muted);
}
.lbi-prof-feedback__msg.is-error { color: var(--lp-signal); }

.lbi-prof-feedback__done {
	display: flex; align-items: center; gap: .45rem;
	margin: .9rem 0 0;
	font-size: .95rem; font-weight: 600;
	color: var(--lp-go-deep);
}
/* Shared success tick (feedback note + survey submit). Inline SVG so it
   needs no asset; fill is --lp-go-deep (#007033) baked in. */
.lbi-prof-feedback__done::before,
.lbi-prof-survey__msg.is-ok::before {
	content: ""; flex: none; width: 1.05em; height: 1.05em;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='10' fill='%23007033'/%3E%3Cpath d='M5.5 10.5l3 3 6-6' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* --- State-keyed survey (feedback-survey plan §4), inside the feedback band.
   Below the fold, so it rides the normal deferred stylesheet, not inline CSS.
   Every button restates text-transform/letter-spacing to opt out of the pierce
   theme's uppercase (0,1,0 beats the theme's bare `button` at 0,0,1). --------- */
/* The survey now sits in its own "Early access" card below its kicker, so the
   old in-card seam (top rule + padding) is gone (Gerrit, 2026-09-13). */
.lbi-prof-survey { margin-top: .4rem; }
.lbi-prof-survey[hidden] { display: none; }

.lbi-prof-survey__lead {
	margin: 0 0 .85rem;
	font-size: .9rem;
	line-height: 1.5;
	color: var(--lp-muted);
	max-width: var(--lp-measure);
}

.lbi-prof-survey__q {
	margin: 0 0 1rem;
	padding: 0;
	border: 0;
	min-width: 0; /* fieldset defaults to min-content, which breaks the flex row */
}
.lbi-prof-survey__q[hidden] { display: none; }

.lbi-prof-survey__prompt {
	margin: 0 0 .5rem;
	padding: 0;
	font-size: .95rem;
	line-height: 1.4;
	font-weight: 600;
	color: var(--lp-ink);
}

/* Answers styled like the quiz options (lbi-quizzes .lq-option): full-width
   stacked rows with a radio-style mark, a lift on hover, a teal wash when
   chosen (Gerrit, 2026-09-13). The mark is a ::before, so no markup change. */
.lbi-prof-survey__opts {
	display: flex;
	flex-direction: column;
	gap: .5rem;
}

.lbi-prof-survey__opt {
	display: flex;
	align-items: center;
	gap: .75rem;
	width: 100%;
	text-transform: none;
	letter-spacing: normal;
	padding: .8rem 1rem;
	border: 1px solid var(--lp-rule);
	border-radius: 8px;
	background: var(--lp-paper);
	color: var(--lp-ink);
	font-size: .95rem;
	line-height: 1.35;
	font-weight: 500;
	text-align: left;
	cursor: pointer;
	transition: transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
.lbi-prof-survey__opt::before {
	content: '';
	flex: none;
	width: 18px;
	height: 18px;
	box-sizing: border-box;
	border-radius: 50%;
	border: 1.5px solid var(--lp-rule);
	transition: border-color .18s ease, background .18s ease;
}
.lbi-prof-survey__opt:hover {
	transform: translateY(-2px);
	border-color: rgba(40, 195, 234, .55);
	box-shadow: 0 12px 24px -16px rgba(0, 133, 66, .8);
}
.lbi-prof-survey__opt:focus-visible {
	outline: 2px solid var(--lp-accent-bright);
	outline-offset: 2px;
}
.lbi-prof-survey__opt[aria-pressed="true"] {
	border-color: var(--lp-accent);
	background: linear-gradient( 100deg, rgba(70, 178, 157, .22), rgba(70, 178, 157, .08) );
	color: var(--lp-ink);
}
.lbi-prof-survey__opt[aria-pressed="true"]::before { border-color: var(--lp-accent); background: var(--lp-accent); }

.lbi-prof-survey__followup {
	display: flex;
	align-items: flex-start;
	gap: .5rem;
	margin: .2rem 0 .3rem;
	font-size: .9rem;
	line-height: 1.45;
	color: var(--lp-ink);
	cursor: pointer;
}
.lbi-prof-survey__followup input { margin-top: .2rem; flex: 0 0 auto; }
.lbi-prof-survey__followup-note {
	margin: 0 0 .6rem;
	font-size: .82rem;
	line-height: 1.5;
	color: var(--lp-muted);
}

.lbi-prof-survey__actions {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: .6rem;
	margin-top: .4rem;
}
.lbi-prof-survey__submit {
	text-transform: none;
	letter-spacing: normal;
	padding: .5rem 1.1rem;
	border: 1px solid var(--lp-accent);
	border-radius: var(--lp-radius);
	background: var(--lp-accent);
	color: #fff;
	font-size: .9rem;
	font-weight: 600;
	cursor: pointer;
	transition: background .15s ease, border-color .15s ease;
}
.lbi-prof-survey__submit:hover { background: #005e75; border-color: #005e75; }
.lbi-prof-survey__submit:focus-visible { outline: 2px solid var(--lp-accent-bright); outline-offset: 2px; }
.lbi-prof-survey__submit:disabled { opacity: .6; cursor: default; }

/* R6 (0.95.0): after the last question is answered, draw the eye to Send and
   say the survey isn't sent until it's tapped (the earlier questions auto-
   advanced, so people expect the last to submit itself). */
.lbi-prof-survey__hint { margin: .35rem 0 0; font-size: .82rem; color: var(--lp-muted); max-width: var(--lp-measure); }
.lbi-prof-survey__hint[hidden] { display: none; }
.lbi-prof-survey__submit { scroll-margin-top: calc(var(--lbi-admin-h, 0px) + var(--lbi-bar-h, 52px) + 16px); }
@keyframes lbi-prof-send-pulse {
	0%   { box-shadow: 0 0 0 0 rgba(0, 112, 139, .45); }
	70%  { box-shadow: 0 0 0 10px rgba(0, 112, 139, 0); }
	100% { box-shadow: 0 0 0 0 rgba(0, 112, 139, 0); }
}
/* Three beats, then still: a perpetual pulse reads as an error state. */
.lbi-prof-survey__submit.is-ready { animation: lbi-prof-send-pulse 1.3s ease-out 3; }
@media (prefers-reduced-motion: reduce) {
	.lbi-prof-survey__submit.is-ready { animation: none; box-shadow: 0 0 0 3px rgba(0, 112, 139, .35); }
}

.lbi-prof-survey__dismiss {
	text-transform: none;
	letter-spacing: normal;
	padding: .5rem .4rem;
	border: 0;
	background: none;
	color: var(--lp-muted);
	font-size: .85rem;
	font-weight: 500;
	text-decoration: underline;
	cursor: pointer;
}
.lbi-prof-survey__dismiss:hover { color: var(--lp-ink); }
.lbi-prof-survey__dismiss:focus-visible { outline: 2px solid var(--lp-accent-bright); outline-offset: 2px; }

.lbi-prof-survey__msg {
	margin: .5rem 0 0;
	font-size: .85rem;
	color: var(--lp-muted);
}
.lbi-prof-survey__msg.is-error { color: var(--lp-signal); }
/* Survey submit confirmation reads as success, with the shared tick from the
   __done rule above (A4, 2026-09-13). */
.lbi-prof-survey__msg.is-ok { display: flex; align-items: center; gap: .45rem; color: var(--lp-go-deep); font-weight: 600; }

/* Paged survey (0.86.0; the JS adds --paged, so no-JS keeps the stacked form):
   one question at a time like the quiz, a counter, Back / Next (or Skip on an
   unanswered single-select), the final block only on the last step. */
.lbi-prof-survey--paged .lbi-prof-survey__q:not(.is-active) { display: none; }
.lbi-prof-survey__nav { display: flex; align-items: center; gap: .75rem; margin: .9rem 0 .2rem; }
.lbi-prof-survey__count { margin-left: auto; font-family: var(--lp-mono); font-size: .72rem; letter-spacing: .08em; color: var(--lp-muted); }
.lbi-prof-survey__navbtn { font: inherit; font-size: .88rem; font-weight: 600; padding: .45rem .9rem; border: 1px solid var(--lp-rule); border-radius: var(--lp-radius); background: var(--lp-paper); color: var(--lp-ink); cursor: pointer; text-transform: none; letter-spacing: normal; }
/* The pierce theme paints a bare button:hover solid green; without an explicit
   background the Next label went teal-on-green. Restate it like __submit / __btn. */
.lbi-prof-survey__navbtn:hover { background: var(--lp-accent); border-color: var(--lp-accent); color: #fff; }
.lbi-prof-survey__navbtn:focus-visible { outline: 2px solid var(--lp-accent-bright); outline-offset: 2px; }
/* Re-assert [hidden] on the flex rows, which a display value would otherwise override. */
.lbi-prof-survey__navbtn[hidden], .lbi-prof-survey__actions[hidden], .lbi-prof-survey__followup[hidden], .lbi-prof-survey__followup-note[hidden] { display: none; }
/* While the band's note form lives inside the survey, the survey's Send submits
   it too (profile.js), so the form's own "Send feedback" button is redundant. */
.lbi-prof-survey .lbi-prof-feedback__actions { display: none; }

.lbi-prof-reset__no {
	border: 1px solid var(--lp-rule);
	background: none;
	color: var(--lp-ink);
}

.lbi-prof-reset__feedback {
	margin: .5rem 0 0;
	font-size: .85rem;
	color: var(--lp-muted);
}

.lbi-prof-reset__feedback.is-error { color: var(--lp-signal); }

/* ---- Empty state reuse ---------------------------------------------------- */
.lbi-profile--empty { max-width: 640px; }

/* Ghost preview: a faded example sheet above the invite, so a first visit
   shows what the dashboard becomes instead of a blank page. Tagged "Example"
   and faded out with a mask (works on any page background) so it never reads
   as real content that failed to load. Decorative only: no pointer events. */
.lbi-prof-ghost {
	position: relative;
	max-width: 26rem;
	margin: 0 auto 1.5rem;
	pointer-events: none;
	user-select: none;
	-webkit-user-select: none;
}

.lbi-prof-ghost__tag {
	position: absolute;
	top: -.6em;
	left: 50%;
	transform: translateX(-50%);
	z-index: 1;
	padding: .18rem .65rem;
	background: var(--lp-paper);
	border: 1px solid var(--lp-rule);
	border-radius: 999px;
	font-family: var(--lp-mono);
	font-size: .62rem;
	font-weight: 600;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--lp-muted);
}

.lbi-prof-ghost__sheet {
	padding: 1.35rem 1.5rem .5rem;
	opacity: .65;
	-webkit-mask-image: linear-gradient(to bottom, #000 45%, transparent 97%);
	mask-image: linear-gradient(to bottom, #000 45%, transparent 97%);
}

.lbi-prof-ghost__title {
	font-family: var(--lp-mono);
	font-size: .72rem;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--lp-ink);
	font-weight: 700;
	margin: 0 0 .35rem;
}

/* Why-note on the empty state: one quiet paragraph (was a numbered 01/02/03
   list until 0.43.0 — the numbers read as apparatus without adding order). */
.lbi-prof-why {
	margin: 1.15rem 0 0;
	font-size: .92rem;
	line-height: 1.5;
	color: var(--lp-ink);
	text-align: left;
}

/* ---- Dashboard empty state (.lq-dash*) ------------------------------------
   These classes are emitted by Lbi_Profile_Page::empty_state_inner() and the
   header drawer. lbi-quizzes also ships rules for them, but every one of those
   is scoped `.love-quiz .lq-dash…` — an ancestor the dashboard never renders —
   so until this block existed the kicker, title and intro fell back to raw
   theme styling.

   The column is deliberately narrower than the 1080px .lbi-profile shell and
   centred on the same axis as the 26rem ghost sheet above it. At full width
   the block was a heading pinned hard left with the quiz list hard right and
   dead space between them (Gerrit, 2026-07-25). */
.lq-dash {
	max-width: 34rem;
	margin: 0 auto;
}

.lq-dash__head { text-align: center; }

.lq-dash__kicker {
	display: block;
	margin-bottom: .35rem;
	font-family: var(--lp-mono);
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--lp-muted);
}

.lq-dash__title {
	margin: 0 0 .5rem;
	font-size: clamp(1.35rem, 3.5vw, 1.75rem);
	line-height: 1.2;
}

.lq-dash__intro {
	margin: 0;
	font-size: .95rem;
	line-height: 1.5;
	color: var(--lp-muted);
}

/* Quiz starters on the empty state: the same invite rows as the populated
   sheet, so the first visit and the fresh-start state read as one system.
   Named .lq-dash__start, NOT .lbi-prof-start — that class is the green
   "Start here" strip further down this file, and being later at equal
   specificity it was winning here and turning this block into a green
   space-between flex row. */
.lq-dash__start {
	margin-top: 1.75rem;
	text-align: left;
}

.lq-dash__start-title {
	font-family: var(--lp-mono);
	font-size: .72rem;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--lp-muted);
	font-weight: 700;
	margin: 0 0 .75rem;
}

/* Fallback single button, shown only when no quiz catalog is available. */
.lq-dash__cta { margin-top: 1.75rem; text-align: center; }

.lq-dash__cta-btn,
.content .lq-dash__cta-btn {
	display: inline-block;
	padding: .6rem 1.2rem;
	border-radius: var(--lp-radius, 6px);
	background: var(--lp-go, #008542);
	background-image: none;
	color: #fff;
	font-size: .92rem;
	font-weight: 600;
	letter-spacing: normal;
	text-transform: none;
	text-decoration: none;
}

/* The explainer sits BELOW the quizzes, as the quiet "why" for anyone still
   deciding rather than a block between them and the CTA. */
.lq-dash .lbi-prof-why {
	margin-top: 1.75rem;
	padding-top: 1.25rem;
	border-top: 1px solid var(--lp-rule);
	font-size: .85rem;
	color: var(--lp-muted);
}

/* ---- Dashboard views: tab strip ------------------------------------------- */
/* Boarding-pass strip: label stubs with dashed dividers (no ordinals since review-1005) (see
   docs/dashboard-mockup.html). One stub per dashboard page; the active stub
   carries an accent underline, unpublished pages render as quiet non-links. */
.lbi-prof-tabs {
	display: flex;
	margin: 0 0 1.5rem;
	border-bottom: 1px solid var(--lp-rule);
}

.lbi-prof-tabs__tab {
	flex: 1;
	text-align: center;
	padding: .8rem .5rem .7rem;
	font-family: var(--lp-mono);
	font-size: .72rem;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--lp-muted);
	text-decoration: none;
	border-right: 1px dashed var(--lp-leader);
	position: relative;
}

.lbi-prof-tabs__tab:last-child { border-right: 0; }

.lbi-prof-tabs__tab:hover { color: var(--lp-accent); }

.lbi-prof-tabs__tab.is-active {
	color: var(--lp-accent);
}

.lbi-prof-tabs__tab.is-active::after {
	content: "";
	position: absolute;
	left: .5rem;
	right: .5rem;
	bottom: -1px;
	height: 3px;
	background: var(--lp-accent);
	border-radius: 2px 2px 0 0;
}

.lbi-prof-tabs__tab.is-unlinked:not(.is-active) { opacity: .45; }

/* ---- Past-trip band (item 1) ----------------------------------------------
   Leads the Overview once the trip's end date is past. It is above the fold, so
   a first-paint copy of these rules is inlined un-deferred from
   Lbi_Profile_Bands::enqueue() (wp_add_inline_style on 'lbi-profile'); THAT copy
   is what styles the band on production (the site-wide switch is off, so
   Header_Cta::enqueue() never runs). This stylesheet copy is the canonical home
   and covers ?ao_noptimize=1 and any non-Autoptimize context. The <a> button and
   link need the ancestor bump to beat the theme's .content a (0,1,1) on colour
   and its gradient marker; :hover restates colour too, or .content a:hover
   (0,2,1) repaints the label mid-hover (Fable review D, F2, 2026-09-13). */
.lbi-prof-past {
	scroll-margin-top: 90px;
}
.lbi-prof-past__kicker {
	display: inline-block;
	margin-bottom: .35rem;
	font-family: var(--lp-mono);
	font-size: .68rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--lp-muted);
}
.lbi-prof-past__title {
	margin: 0 0 .4rem;
	font-size: 1.05rem;
	line-height: 1.3;
	color: var(--lp-ink);
	text-transform: none;
	letter-spacing: normal;
}
.lbi-prof-past__lead {
	margin: 0 0 .9rem;
	font-size: .92rem;
	line-height: 1.55;
	color: var(--lp-ink);
}
.lbi-prof-past__actions { margin: 0; }
.lbi-prof-past .lbi-prof-past__btn {
	display: inline-block;
	padding: .55rem 1rem;
	border-radius: var(--lp-radius);
	background: var(--lp-accent);
	color: #fff;
	background-image: none;
	text-decoration: none;
	text-transform: none;
	font-weight: 600;
}
.lbi-prof-past .lbi-prof-past__btn:hover { background: #005e75; color: #fff; }
.lbi-prof-past .lbi-prof-past__link {
	color: var(--lp-muted);
	background-image: none;
	text-decoration: underline;
	margin-left: 1rem;
}

/* ---- Overview cards -------------------------------------------------------- */
.lbi-prof-overview {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--lp-gap);
}

.lbi-prof-ocard {
	display: flex;
	flex-direction: column;
	gap: .45rem;
	min-height: 9rem;
	color: var(--lp-ink);
	text-decoration: none;
}

a.lbi-prof-ocard:hover { border-color: var(--lp-accent); }
a.lbi-prof-ocard:hover .lbi-prof-ocard__arrow { color: var(--lp-accent); }

/* Hierarchy pass rollout (Gerrit, 2026-08-15; the Trip details trial extended
   to the other tabs): the card HEADINGS are Overview's primary content, so
   they carry the size, while the kicker and arrow drop to the same muted
   whisper as every other mono label — accent is reserved for hover and the
   one primary action per view. */
.lbi-prof-ocard__kicker {
	font-family: var(--lp-mono);
	font-size: .66rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--lp-muted);
}

.lbi-prof-ocard__heading {
	font-size: 1.25rem;
	font-weight: 700;
	letter-spacing: -.01em;
	line-height: 1.25;
}

.lbi-prof-ocard__body {
	font-size: .85rem;
	color: var(--lp-muted);
	flex: 1;
}

.lbi-prof-ocard__flag {
	font-family: var(--lp-mono);
	font-size: .68rem;
	color: var(--lp-signal);
}

.lbi-prof-ocard__arrow {
	font-family: var(--lp-mono);
	font-size: .72rem;
	color: var(--lp-muted);
}

/* ---- Recommended rows ------------------------------------------------------ */
.lbi-prof-recs {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* Every dashboard list at the .lbi-profile bump (0,2,0): the theme's
   .entry-content ul (0,1,1) was putting its 40px indent back on lists this
   file had already reset at (0,1,0), which on a phone ate a fifth of the
   width for nothing (Gerrit, 2026-08-26). The echoed-notes list got this
   bump first on 2026-08-25; this is the same fix for the rest. */
.lbi-profile .lbi-prof-recs,
.lbi-profile .lbi-prof-savedlist,
.lbi-profile .lbi-prof-invites,
.lbi-profile .lbi-prof-othertrips__list {
	list-style: none;
	margin-left: 0;
	padding-left: 0;
}
.lbi-profile .lbi-prof-recs > li,
.lbi-profile .lbi-prof-savedlist > li {
	list-style: none;
	margin-left: 0;
}

.lbi-prof-rec {
	display: flex;
	align-items: baseline;
	gap: 1rem;
	padding: .8rem 0;
	border-bottom: 1px solid var(--lp-rule);
}

.lbi-prof-rec:last-child { border-bottom: 0; }

.lbi-prof-rec__body { flex: 1; min-width: 0; }

/* Recommended-card thumbnail (item 10, 2026-09-13): a small fixed square, image
   cropped to cover, mirroring the Saved-tab row. A row with a thumb centres
   (like .lbi-prof-savedrow); a text-only row keeps its baseline alignment. The
   JS error fallback swaps a broken img for the box's data-fallback glyph. */
.lbi-prof-rec:has(.lbi-prof-rec__thumb) { align-items: center; }
.lbi-prof-rec__thumb { width: 3.5rem; height: 3.5rem; flex: none; overflow: hidden; border-radius: var(--lp-radius); background: #eef7fa; display: flex; align-items: center; justify-content: center; color: var(--lp-muted); }
.lbi-prof-rec__img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Hierarchy pass (2026-08-15): the experience names are this tab's primary
   content — step up like the trip sheet's settled values, so the shortlist
   visibly outranks the fun-quiz tail below it. */
.lbi-prof-rec__title {
	display: block;
	font-weight: 700;
	font-size: 1.08rem;
}

.lbi-prof-rec__why {
	display: block;
	font-size: .85rem;
	color: var(--lp-muted);
	margin-top: .15rem;
}

.lbi-prof-rec__link {
	font-family: var(--lp-mono);
	font-size: .72rem;
	color: var(--lp-accent);
	text-decoration: none;
	border-bottom: 1px solid var(--lp-accent-bright);
	white-space: nowrap;
}

/* ---- Saved-page rows -------------------------------------------------------- */
/* Segment heading (Tours / Blog posts / Guide pages): same mono eyebrow voice
   as the group titles, so segments read as parts of one document. */
.lbi-prof-savedgroup {
	margin: 1.4rem 0 .2rem;
	font-family: var(--lp-mono);
	font-size: .72rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .16em;
	color: var(--lp-muted);
}

.lbi-prof-savedgroup:first-child { margin-top: 0; }

/* .lbi-profile bump: the theme’s .content ul (0,1,1) indents every list 40px,
   which on a 390px phone ate an eighth of each saved row (seen 2026-08-22). */
.lbi-profile .lbi-prof-savedlist {
	list-style: none;
	margin: 0;
	padding: 0;
}

.lbi-prof-savedrow {
	position: relative; /* the title's stretched link covers the whole row */
	display: flex;
	align-items: center;
	gap: .9rem;
	padding: .75rem 0;
	border-bottom: 1px solid var(--lp-rule);
}

.lbi-prof-savedrow:last-child { border-bottom: 0; }

.lbi-prof-savedrow__thumb {
	width: 3rem;
	height: 3rem;
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.2rem;
	overflow: hidden;
	border-radius: var(--lp-radius);
	background: #eef7fa;
}

.lbi-prof-savedrow__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.lbi-prof-savedrow__body { flex: 1; min-width: 0; }

/* Hierarchy pass (2026-08-15): the page titles are the Saved tab's primary
   content; the Remove control below drops to the quiet register so a red-ish
   bordered button stops reading as part of every row. */
.lbi-prof-savedrow__title {
	display: block;
	font-weight: 700;
	font-size: 1.08rem;
	color: var(--lp-ink);
	text-decoration: none;
}

/* Stretched link (2026-08-22): the title used to be the row's only target,
   thin for a tour row that now prints island, fare and rating. The anchor's
   pseudo-element covers the row, so thumb, facts and meta all open the page;
   the Remove button sits above it. No nested anchors, no markup change. */
.lbi-prof-savedrow__title::after {
	content: '';
	position: absolute;
	inset: 0;
}
.lbi-prof-savedrow__title:hover { color: var(--lp-accent); }
.lbi-prof-savedrow:hover .lbi-prof-savedrow__title { color: var(--lp-accent); }
/* An image thumb is a plain block the image fills edge to edge — NOT the
   flex-centered emoji frame, whose #eef7fa background showed as light-blue bands
   beside images that didn't cover (mobile 3:1 banner especially). Emoji thumbs
   keep the tinted frame. */
.lbi-prof-savedrow:has(.lbi-prof-savedrow__img) .lbi-prof-savedrow__thumb {
	width: 4.5rem;
	display: block;
	background: transparent;
}

.lbi-prof-savedrow__meta {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: .75rem;
	font-family: var(--lp-mono);
	font-size: .68rem;
	color: var(--lp-muted);
	margin-top: .15rem;
}

.lbi-prof-savedrow__remove {
	position: relative;
	z-index: 1; /* above the stretched link */
	flex: none;
	font-family: var(--lp-mono);
	font-size: inherit; /* matches the meta line it now sits on */
	color: var(--lp-muted);
	background: none;
	border: 0;
	border-radius: 3px;
	/* Vertical padding keeps a finger-sized target without changing the line. */
	padding: .35rem 0 .35rem .6rem;
	margin: -.35rem 0;
	line-height: inherit;
	text-transform: none;
	letter-spacing: normal;
	cursor: pointer;
}

.lbi-prof-savedrow__remove:hover {
	color: var(--lp-signal);
	background: none;
	text-decoration: underline;
}

.lbi-prof-saved__intro {
	margin: 0 0 .85rem;
	font-size: .95rem;
	line-height: 1.5;
	color: var(--lp-muted);
	max-width: var(--lp-measure);
}

/* Saved toolbar (0.48.0): group-by switch + share link above the groups. The
   switch only renders when the saves span more than one island. Buttons opt
   out of the theme's uppercase/letter-spacing (pierce gotcha). */
.lbi-prof-saved__bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: .6rem 1rem;
	margin: 0 0 1rem;
	padding-bottom: .75rem;
	border-bottom: 1px solid var(--lp-rule);
}

.lbi-prof-saved__group {
	display: inline-flex;
	align-items: center;
	gap: .35rem;
}

.lbi-prof-saved__grouplabel {
	font-family: var(--lp-mono);
	font-size: .68rem;
	text-transform: uppercase;
	letter-spacing: .14em;
	color: var(--lp-muted);
	margin-right: .25rem;
}

.lbi-prof-saved__groupbtn {
	font-family: inherit;
	font-size: .82rem;
	font-weight: 600;
	text-transform: none;
	letter-spacing: normal;
	color: var(--lp-ink);
	background: none;
	border: 1px solid var(--lp-rule);
	border-radius: 999px;
	padding: .3rem .8rem;
	cursor: pointer;
}

.lbi-prof-saved__groupbtn.is-active {
	color: #fff;
	background: var(--lp-accent);
	border-color: var(--lp-accent);
}

.lbi-prof-saved__groupbtn:focus-visible {
	outline: 2px solid var(--lp-accent);
	outline-offset: 2px;
}

/* The Recommended tab's toolbar (0.76.0) is the same control, same look. */
.lbi-prof-recs__bar {
	display: flex;
	justify-content: flex-start;
	margin: 0 0 1rem;
	padding-bottom: .75rem;
	border-bottom: 1px solid var(--lp-rule);
}

.lbi-prof-saved__share,
.content .lbi-prof-saved__share,
.lbi-prof-recs__share,
.content .lbi-prof-recs__share {
	font-size: .85rem;
	font-weight: 600;
	color: var(--lp-accent);
	background-image: none;
	text-decoration: none;
	border-bottom: 1px solid var(--lp-accent);
}

.lbi-prof-saved__share:hover,
.content .lbi-prof-saved__share:hover,
.lbi-prof-recs__share:hover,
.content .lbi-prof-recs__share:hover {
	color: var(--lp-signal);
	border-color: var(--lp-signal);
}

/* The facts line: island, adult fare, review standing. Reads as one sentence
   of separated facts, above the quieter mono meta line. */
.lbi-prof-savedrow__facts {
	display: block;
	margin-top: .2rem;
	font-size: .86rem;
	color: var(--lp-ink);
}

.lbi-prof-savedrow__facts > span + span::before {
	content: '·';
	margin: 0 .4rem;
	color: var(--lp-leader);
}

.lbi-prof-savedrow__island { font-weight: 600; }

.lbi-prof-savedrow__offtrip { color: var(--lp-signal); }

.lbi-prof-savedrow.is-offtrip .lbi-prof-savedrow__thumb { opacity: .7; }

/* ---- Updated-since-you-saved: one echoed-notes block (my-trip-badge-spec) ---- */
/* The page's own update-log entries, echoed under the facts. The accented
   "Updated {date}" lead on the newest entry IS the marker — the separate chip
   was merged into it (2026-08-25), so the date is shown once, not twice.
   STATE, not news: it stays until the page is removed or a newer save resets
   saved_at; the pill badge is what clears on a click-through. */
/* .lbi-profile bump (0,2,0) so the theme's .content ul (0,1,1) can't put its
   40px indent or its bullet back on the echoed notes — they read as a flush,
   dotless block under the facts. */
.lbi-profile .lbi-prof-savedrow__changes {
	list-style: none;
	margin: .35rem 0 0;
	padding: .4rem 0 0;
	border-top: 1px dashed var(--lp-leader);
	font-size: .8rem;
	line-height: 1.45;
}

.lbi-profile .lbi-prof-savedrow__change {
	list-style: none;
	margin: 0;
	color: var(--lp-muted);
}

.lbi-prof-savedrow__change + .lbi-prof-savedrow__change {
	margin-top: .15rem;
}

.lbi-prof-savedrow__change-date {
	font-weight: 600;
	color: var(--lp-go-deep);
}

.lbi-prof-savedrow__change-date::after {
	content: ' ·';
	color: var(--lp-leader);
}

/* ---- Per-view empty note ---------------------------------------------------- */
/* Heading, sentence and call to action used to sit on top of each other: the
   body had margin:0 and .lbi-prof-invites has margin:0, with no rule joining
   them, so the CTA butted straight against the paragraph (Gerrit, 2026-07-25). */
.lbi-prof-viewempty {
	border: 1px dashed var(--lp-leader);
	border-radius: var(--lp-radius);
	padding: 2.5rem 1.5rem;
	text-align: center;
	/* This dashed box is a bare sibling of the "Trip privacy" footer group, which
	   carries no top margin, so without this its border butted the footer heading
	   (Gerrit, iPhone, 2026-09-14). Match the content groups' bottom rhythm. */
	margin-bottom: clamp(2rem, 5vw, 3rem);
}
/* On the Trip details tab this card sits ABOVE the checklist in the same zone,
   which already owns the gap between them; the footer-clearing margin above
   would double it. */
.lbi-prof-viewempty--checklist { margin-bottom: 0; }

.lbi-prof-viewempty__title {
	font-size: 1.05rem;
	margin: 0 0 .75rem;
	/* pierce force-uppercases bare headings; this one must read as written
	   (same opt-out as every other readable title in this file). */
	text-transform: none;
	letter-spacing: normal;
}

.lbi-prof-viewempty__body {
	max-width: 46ch;
	margin: 0 auto;
	font-size: .88rem;
	line-height: 1.55;
	color: var(--lp-muted);
}

/* The invite row is a full-width flex row, so left to itself it reads as
   left-aligned content inside a centred box. Constrain and centre it. */
.lbi-prof-viewempty .lbi-prof-invites {
	max-width: 28rem;
	margin: 1.75rem auto 0;
}

/* ---- Save demo (empty Saved tab) -------------------------------------------
   A looping mock of the real save button: cursor glides in, clicks, the
   bookmark fills. Base state below is the FINISHED frame (saved, no cursor),
   so a visitor with reduced motion sees a coherent still rather than a
   half-drawn animation; the moving version is opted into further down. */
.lbi-savedemo {
	max-width: 24rem;
	margin: 1.75rem auto 0;
	user-select: none;
	-webkit-user-select: none;
}

/* Each of the two real placements, with a caption naming where it sits. */
.lbi-savedemo__spot {
	display: flex;
	align-items: center;
	gap: .55rem;
	width: 100%;
}

.lbi-savedemo__spot--top { margin-top: .1rem; }
.lbi-savedemo__spot--end { margin-top: .5rem; }

.lbi-savedemo__where {
	flex: none;
	font-family: var(--lp-mono, monospace);
	font-size: .58rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--lp-muted);
	white-space: nowrap;
}

/* The end-of-read block is an aside on the real page, so it reads as its own
   panel here too rather than as a second loose button. */
.lbi-savedemo__spot--end {
	padding: .5rem .55rem;
	border-radius: var(--lp-radius);
	background: rgba(0, 112, 139, .05);
}

.lbi-savedemo__page {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: .5rem;
	padding: 1rem 1.1rem 1.15rem;
	border: 1px solid var(--lp-rule);
	border-radius: var(--lp-radius);
	background: var(--lp-paper, #fff);
	box-shadow: 0 1px 2px rgba(48, 57, 66, .06);
	overflow: hidden;
}

.lbi-savedemo__line {
	display: block;
	height: .42rem;
	width: 100%;
	border-radius: 999px;
	background: var(--lp-rule);
}

.lbi-savedemo__line--head {
	height: .6rem;
	width: 62%;
	background: var(--lp-leader, #c9c3b6);
}

.lbi-savedemo__line--short { width: 74%; }

/* Mirrors .lbi-save-page in save-button.css: same pill, same two-path
   bookmark, same ocean -> green flip. Not the same class, because this one is
   inert scenery and must never be picked up by the save handler. */
.lbi-savedemo__btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: .35rem;
	padding: .32rem .7rem;
	font-family: var(--lp-mono, monospace);
	font-size: .62rem;
	letter-spacing: .04em;
	border: 1px solid var(--lp-go, #008542);
	border-radius: 999px;
	color: var(--lp-go, #008542);
	background: transparent;
	white-space: nowrap;
}

.lbi-savedemo__icon { flex: none; display: block; }

/* End frame: filled bookmark, "Saved" label. */
.lbi-savedemo__icon-outline { opacity: 0; }
.lbi-savedemo__icon-fill { opacity: 1; }

.lbi-savedemo__labels {
	position: relative;
	display: grid;
	white-space: nowrap;
}

/* Both labels occupy the same grid cell, so the pill is sized by the longer
   of the two and the swap causes no reflow. */
.lbi-savedemo__label {
	grid-area: 1 / 1;
	text-align: left;
}

.lbi-savedemo__label--save { opacity: 0; }
.lbi-savedemo__label--saved { opacity: 1; }

.lbi-savedemo__pulse {
	position: absolute;
	inset: -2px;
	border-radius: 999px;
	border: 2px solid var(--lp-go, #008542);
	opacity: 0;
	pointer-events: none;
}

/* Narrow phones: the "End of a long guide" row carries the long label
   ("Saved to your trip") beside its caption; let it drop to its own line
   instead of running off the card (Gerrit, 2026-08-23). */
@media (max-width: 480px) {
	.lbi-savedemo__spot--end { flex-wrap: wrap; }
	.lbi-savedemo__btn { max-width: 100%; }
	.lbi-savedemo__labels { white-space: normal; }
}

.lbi-savedemo__cursor {
	position: absolute;
	left: 0;
	top: 0;
	display: none;
	line-height: 0;
	filter: drop-shadow(0 1px 2px rgba(48, 57, 66, .3));
}

@media (prefers-reduced-motion: no-preference) {
	.lbi-savedemo__cursor {
		display: block;
		animation: lbi-savedemo-cursor 6s ease-in-out infinite;
	}

	.lbi-savedemo__btn { animation: lbi-savedemo-btn 6s ease-in-out infinite; }
	.lbi-savedemo__icon-outline { animation: lbi-savedemo-out 6s ease-in-out infinite; }
	.lbi-savedemo__icon-fill { animation: lbi-savedemo-in 6s ease-in-out infinite; }
	.lbi-savedemo__label--save { animation: lbi-savedemo-label-out 6s step-end infinite; }
	.lbi-savedemo__label--saved { animation: lbi-savedemo-label-in 6s step-end infinite; }
	.lbi-savedemo__pulse { animation: lbi-savedemo-pulse 6s ease-in-out infinite; }
}

/* Cursor: rest clear in the top-right gutter, glide onto the TOP button's
   bookmark icon by 30%, press at 34%, then pull back out so both freshly
   filled buttons and their captions are readable rather than sitting under
   the pointer. Coordinates are rem offsets from the mock page's padding box
   (24rem x ~11.8rem) and were measured against the rendered layout, not
   guessed — re-measure if the demo's markup changes. It clicks the TOP button
   only, and BOTH fill, because that is what the real page does: save-button.js
   flips every button carrying the same post id, not just the one clicked. */
@keyframes lbi-savedemo-cursor {
	0%, 6%    { transform: translate(21rem, 0.55rem) scale(1); opacity: 0; }
	12%       { transform: translate(21rem, 0.55rem) scale(1); opacity: 1; }
	30%       { transform: translate(8.3rem, 2.6rem) scale(1); opacity: 1; }
	34%, 40%  { transform: translate(8.3rem, 2.6rem) scale(.82); opacity: 1; }
	46%       { transform: translate(8.3rem, 2.6rem) scale(1); opacity: 1; }
	58%, 86%  { transform: translate(21rem, 0.55rem) scale(1); opacity: 1; }
	94%, 100% { transform: translate(21rem, 0.55rem) scale(1); opacity: 0; }
}

/* Ocean while unsaved, green from the click onward. */
@keyframes lbi-savedemo-btn {
	0%, 36%   { color: #00708b; border-color: #00708b; }
	40%, 88%  { color: #008542; border-color: #008542; }
	96%, 100% { color: #00708b; border-color: #00708b; }
}

@keyframes lbi-savedemo-out {
	0%, 36%   { opacity: 1; }
	40%, 88%  { opacity: 0; }
	96%, 100% { opacity: 1; }
}

@keyframes lbi-savedemo-in {
	0%, 36%   { opacity: 0; }
	40%, 88%  { opacity: 1; }
	96%, 100% { opacity: 0; }
}

/* The two labels differ in text and width, so cross-FADING them stacks two
   different sentences on top of each other for the length of the fade, which
   reads as a rendering fault. step-end makes the swap instant. The icon paths
   above are the same shape, so they can keep fading. */
@keyframes lbi-savedemo-label-out {
	0%   { opacity: 1; }
	38%  { opacity: 0; }
	92%  { opacity: 1; }
}

@keyframes lbi-savedemo-label-in {
	0%   { opacity: 0; }
	38%  { opacity: 1; }
	92%  { opacity: 0; }
}

@keyframes lbi-savedemo-pulse {
	0%, 34%  { opacity: 0; transform: scale(1); }
	38%      { opacity: .7; transform: scale(1); }
	52%, 100% { opacity: 0; transform: scale(1.35); }
}

/* ---- Responsive ----------------------------------------------------------- */
/* Small screens: four stubs in one row leaves ~90px each, which crams the
   labels and the tap targets. Reflow to a 2x2 grid with real padding; the
   active underline keeps working per cell. */
@media (max-width: 560px) {
	.lbi-prof-tabs {
		display: grid;
		grid-template-columns: 1fr 1fr;
		border: 1px solid var(--lp-rule);
		border-radius: var(--lp-radius);
		overflow: hidden;
	}
	.lbi-prof-tabs__tab {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: .45rem;
		padding: .85rem .5rem;
		min-height: 44px;
		border-right: 1px dashed var(--lp-leader);
		border-bottom: 1px dashed var(--lp-leader);
	}
	.lbi-prof-tabs__tab:nth-child(2n) { border-right: 0; }
	/* Only the LAST ROW of the 2-column grid drops its bottom rule: the final tab
	   always, and the one before it only when the two form a full row (the
	   before-last sits in the left column). nth-child(n+3) assumed exactly four
	   tabs and stranded tab 5, dropping the rule under tabs 3 and 4 so the fifth
	   tab read as joined to the third (Gerrit, 2026-09-13). */
	.lbi-prof-tabs__tab:last-child { border-bottom: 0; }
	.lbi-prof-tabs__tab:nth-last-child(2):nth-child(odd) { border-bottom: 0; }
	/* The 2026-09-13 fix deleted the old :nth-child(n+3){border-bottom:0} rule,
	   but the tab strip is above the fold, so that rule is frozen in the stored
	   critical CSS (uploads/ao_ccss) and STILL strips the divider under tabs 3-4
	   at first paint — you cannot fix above-the-fold CSS by un-matching it
	   (CLAUDE.md AO gotcha 2). Restate the wanted borders at higher specificity
	   (.lbi-profile .lbi-prof-tabs = 0,3,0 beats the inline 0,2,0) so they win
	   without a CCSS regen (Gerrit, iPhone/Firefox, 2026-09-14). */
	.lbi-profile .lbi-prof-tabs .lbi-prof-tabs__tab { border-bottom: 1px dashed var(--lp-leader); }
	.lbi-profile .lbi-prof-tabs .lbi-prof-tabs__tab:last-child { border-bottom: 0; }
	.lbi-profile .lbi-prof-tabs .lbi-prof-tabs__tab:nth-last-child(2):nth-child(odd) { border-bottom: 0; }
	/* A lone final tab (odd count) spans the full width, no dead half-cell beside it. */
	.lbi-prof-tabs__tab:last-child:nth-child(odd) { grid-column: 1 / -1; }
	.lbi-prof-tabs__tab.is-active::after {
		left: .35rem;
		right: .35rem;
		bottom: .35rem;
	}
}

@media (max-width: 720px) {
	.lbi-prof-overview { grid-template-columns: 1fr; }
	.lbi-prof-ocard { min-height: 0; }
	/* A touch more air between rows and around group titles on small screens;
	   the desktop rhythm reads cramped when everything is one column. */
	.lbi-profile__zone { gap: 1.25rem; }
	.lbi-prof-savedrow { padding: .95rem 0; }
	/* A row with a real image becomes a card on a phone: the image as a 3:1
	   banner on top, title + facts + Remove on the line under it. The three
	   columns (thumb, text, button) were fighting for 320px (Gerrit,
	   2026-08-22). Emoji-thumb rows keep the compact row. */
	.lbi-prof-savedrow:has(.lbi-prof-savedrow__img) { flex-wrap: wrap; gap: .6rem .9rem; }
	.lbi-prof-savedrow:has(.lbi-prof-savedrow__img) .lbi-prof-savedrow__thumb {
		width: 100%;
		height: auto;
		aspect-ratio: 3 / 1;
	}
	.lbi-prof-savedrow:has(.lbi-prof-savedrow__img) .lbi-prof-savedrow__body { flex: 1 1 0; }
	/* Remove keeps its dark-red colour on a phone so it reads as a control
	   (Gerrit, 2026-08-22); since 2026-08-26 it sits on the meta line instead
	   of a column of its own, so the text runs full width. */
	.lbi-prof-savedrow__remove {
		color: rgb(150, 30, 30);
	}
	/* "Save what you are weighing" is flex:none, so on a phone the LABEL
	   folded to three lines around it (Gerrit, 2026-08-26). The link drops
	   to its own line under the label, aligned with the label text. */
	.lbi-profile .lbi-prof-progress__step { flex-wrap: wrap; }
	/* The value ("Still a guess: Oʻahu and Big Island") is flex:none at (0,2,0), so
	   it cannot shrink or wrap and runs out of the card at 375px. Let it shrink and
	   wrap; (0,3,0) beats the base rule later in the file. */
	.lbi-profile .lbi-prof-progress__step .lbi-prof-progress__value {
		flex: 0 1 auto;
		min-width: 0;
		overflow-wrap: anywhere;
	}
	/* (0,3,0): the base __todo rule sits later in the file and would win at (0,2,0).
	   flex:0 0 100% plus the indent made the link (and its underline) 100% + margin
	   wide, over the edge. Let it shrink; cap its width at the row minus the indent. */
	.lbi-profile .lbi-prof-progress__step .lbi-prof-progress__todo {
		flex: 0 1 auto;
		max-width: calc(100% - 9px - .6rem);
		margin-left: calc(9px + .6rem);
	}
	.lbi-prof-rec { padding: .95rem 0; }
	.lbi-prof-rec {
		flex-direction: column;
		align-items: flex-start;
		gap: .35rem;
	}
	/* A row with a photo gets the Saved tab's phone card (0.96.2): the image as
	   a 3:1 banner across the top. The 3.5rem square survived the column stack
	   and showed a 56px crop of an image loaded far larger (Gerrit, 2026-09-19).
	   Both align-items restated: the base :has() rule centres the row at (0,2,0). */
	.lbi-prof-rec:has(.lbi-prof-rec__thumb) { align-items: flex-start; gap: .55rem; }
	.lbi-prof-rec:has(.lbi-prof-rec__thumb) .lbi-prof-rec__thumb {
		width: 100%;
		height: auto;
		aspect-ratio: 3 / 1;
		display: block;
		background: transparent;
	}
	.lbi-prof-viewempty { padding: 2rem 1.1rem; }
	.lbi-prof-spine { grid-template-columns: 1fr; }
	.lbi-prof-spine__more {
		border-left: 0;
		border-top: 1px solid var(--lp-rule);
		padding-left: 0;
		padding-top: 1.25rem;
	}
	/* Long values wrap under the label instead of fighting the leader. */
	.lbi-prof-fact { grid-template-columns: auto 1fr; }
	.lbi-prof-fact__leader { display: none; }
	.lbi-prof-fact__value { grid-column: 2; text-align: right; }
	.lbi-prof-fact__source { grid-column: 2; }
	.lbi-prof-fact { border-bottom: 1px dotted var(--lp-leader); }
	.lbi-prof-fact:last-child { border-bottom: 0; }
}

@media (prefers-reduced-motion: reduce) {
	.lbi-profile * { transition: none !important; }
}

/* ---- Trip readiness: the progress meter ------------------------------------
   Named steps, never a bare percentage: "60%" tells a visitor nothing, while
   "your month is still open" tells them what to do next. Each settled step shows
   the value it settled, so the meter reads as a summary of the trip and not as a
   score in a game. */
.lbi-profile .lbi-prof-progress {
	margin: 0;
	padding: var(--lp-pad); /* CCSS belt: the stored snapshot restates the old padding at (0,2,0); delete after the /your-trip/ regen */
}

.lbi-profile .lbi-prof-progress__head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .6rem 1rem;
	margin-bottom: 1rem;
}

.lbi-profile .lbi-prof-progress__title {
	margin: 0;
	font-family: var(--lp-mono);
	font-size: .78rem;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--lp-muted);
}

.lbi-profile .lbi-prof-progress__bar {
	flex: 1 1 160px;
	height: 6px;
	min-width: 120px;
	background: var(--lp-rule);
	border-radius: 999px;
	overflow: hidden;
}

.lbi-profile .lbi-prof-progress__fill {
	display: block;
	height: 100%;
	background: linear-gradient(90deg, var(--lp-accent), var(--lp-go));
	border-radius: 999px;
	transition: width .4s ease;
}

.lbi-profile .lbi-prof-progress__steps {
	margin: 0;
	padding: 0;
	list-style: none;
}

.lbi-profile .lbi-prof-progress__step {
	display: flex;
	align-items: baseline;
	gap: .6rem;
	padding: .5rem 0;
	border-top: 1px solid var(--lp-rule);
}
.lbi-profile .lbi-prof-progress__step:first-child { border-top: 0; }

/* The mark: a filled dot for settled, a hollow ring for open. */
.lbi-profile .lbi-prof-progress__mark {
	flex: none;
	width: 9px;
	height: 9px;
	border-radius: 50%;
	border: 1.5px solid var(--lp-leader);
	transform: translateY(-1px);
}
.lbi-profile .lbi-prof-progress__step.is-done .lbi-prof-progress__mark {
	background: var(--lp-go);
	border-color: var(--lp-go);
}

.lbi-profile .lbi-prof-progress__label {
	flex: 1 1 auto;
	font-size: .95rem;
	color: var(--lp-ink);
}
.lbi-profile .lbi-prof-progress__step.is-open .lbi-prof-progress__label { color: var(--lp-muted); }

.lbi-profile .lbi-prof-progress__value {
	flex: none;
	font-family: var(--lp-mono);
	font-size: .82rem;
	color: var(--lp-ink);
}
.lbi-profile .lbi-prof-progress__value.is-open { color: var(--lp-leader); }

.lbi-profile .lbi-prof-progress__todo {
	flex: none;
	font-family: var(--lp-mono);
	font-size: .78rem;
	color: var(--lp-accent);
	text-decoration: none;
	border-bottom: 1px solid currentColor;
}
.lbi-profile .lbi-prof-progress__todo:hover { color: var(--lp-go-deep); }

/* Open-conflict notice under the steps: one quiet line, the link styled like a
   todo so it reads as the next action rather than an alarm. */
.lbi-profile .lbi-prof-progress__notice {
	margin: .85rem 0 0;
	padding-top: .75rem;
	border-top: 1px solid var(--lp-rule);
	font-size: .85rem;
	line-height: 1.5;
	color: var(--lp-muted);
}
.lbi-profile .lbi-prof-progress__notice-link {
	font-family: var(--lp-mono);
	font-size: .78rem;
	color: var(--lp-accent);
	text-decoration: none;
	border-bottom: 1px solid currentColor;
	background-image: none;
}
.lbi-profile .lbi-prof-progress__notice-link:hover { color: var(--lp-go-deep); }

/* ---- The "you just settled something" band ---------------------------------
   Green, top of the dashboard, one per visit, and it says something TRUE: the
   headline is what they settled, the body is what it means, and every number in
   it was computed by the quiz that scored their answers. A band that said "Nice,
   you finished a quiz!" would be noise; this one is worth reading. */
.lbi-profile .lbi-prof-celebrate {
	position: relative;
	margin: 0;
	padding: 1rem 2.4rem 1rem 1.25rem;
	border-left: 3px solid var(--lp-go);
	border-radius: 0 var(--lp-radius) var(--lp-radius) 0;
	background: rgba(0, 133, 66, .06);
	animation: lbi-prof-celebrate-in .45s cubic-bezier(.22, 1, .36, 1) both;
}

.lbi-profile .lbi-prof-celebrate__title {
	margin: 0 0 .3rem;
	font-size: 1.06rem;
	font-weight: 700;
	color: var(--lp-go-deep);
}

.lbi-profile .lbi-prof-celebrate__body {
	margin: 0;
	font-size: .96rem;
	line-height: 1.55;
	color: var(--lp-ink);
	max-width: var(--lp-measure);
}

@keyframes lbi-prof-celebrate-in {
	from { opacity: 0; transform: translateY(-6px); }
	to   { opacity: 1; transform: none; }
}

/* Arrival highlight (my-trip-badge-spec.md, inbox model). Clicking a drawer
   "Since you were here" item deep-links here (?lbi_upd) and profile.js adds
   .is-upd-highlight to what changed: the re-scored picks on Recommended, the
   changed saved rows on Saved. There is no 'update' celebration band any more —
   the highlight IS the announcement. It grows in, then STAYS a light-green card
   for the visit so the visitor can scan everything that changed; a plain later
   visit (no ?lbi_upd) shows nothing. */
@keyframes lbi-upd-grow {
	0%   { transform: scale(.99); }
	55%  { transform: scale(1.012); }
	100% { transform: scale(1); }
}

.lbi-profile .lbi-prof-savedrow.is-upd-highlight,
.lbi-profile .lbi-prof-recs .lbi-prof-rec.is-upd-highlight {
	/* Real padding so the text never touches the green ring, and a gap so the
	   cards don't crowd. The base rows separate with a bottom border, which reads
	   as a seam inside a card — drop it here. The STATIC green only; the grow is a
	   separate one-shot class (below) removed after it plays, so re-sorting the
	   Saved tab (which MOVES the rows, restarting any live animation) can't bounce
	   it. */
	padding: .8rem 1rem;
	margin: 0 0 .6rem;
	border-bottom: 0;
	border-radius: var(--lp-radius);
	background: rgba(0, 133, 66, .07);
	box-shadow: inset 0 0 0 1px var(--lp-go);
}

.lbi-profile .lbi-prof-savedrow.is-upd-grow,
.lbi-profile .lbi-prof-recs .lbi-prof-rec.is-upd-grow {
	animation: lbi-upd-grow .5s cubic-bezier(.22, 1, .36, 1) both;
}

/* Trip details: a When-to-go re-run lands here since 2026-09-22, and the highlight
   is exactly its own result card — the <section data-section="{quiz}"> wrapper, not
   every card on the tab. That wrapper is padding-less and holds the card's own paper
   surface, so frame it from just outside with a green ring + faint wash. */
.lbi-profile .lbi-profile__section.is-upd-highlight {
	padding: 4px;
	border-radius: calc(var(--lp-radius) + 4px);
	background: rgba(0, 133, 66, .1);
	box-shadow: inset 0 0 0 1px var(--lp-go);
}
.lbi-profile .lbi-profile__section.is-upd-grow {
	animation: lbi-upd-grow .5s cubic-bezier(.22, 1, .36, 1) both;
}

.lbi-profile .lbi-prof-savedrow.is-upd-highlight:last-child,
.lbi-profile .lbi-prof-recs .lbi-prof-rec.is-upd-highlight:last-child {
	margin-bottom: 0;
}

/* The saved-row thumb keeps its own rounded frame; align it to the top so a
   tall (wrapped) highlighted row never leaves green bands above and below the
   image. */
.lbi-profile .lbi-prof-savedrow.is-upd-highlight {
	align-items: flex-start;
}

.lbi-profile .lbi-prof-savedrow.is-upd-highlight .lbi-prof-savedrow__thumb {
	background: transparent;
}

@media (prefers-reduced-motion: reduce) {
	.lbi-profile .lbi-prof-savedrow.is-upd-grow,
	.lbi-profile .lbi-prof-recs .lbi-prof-rec.is-upd-grow,
	.lbi-profile .lbi-profile__section.is-upd-grow {
		animation: none;
	}
}

/* ---- Arrival notice (restored, my-trip-badge-spec.md) -----------------------
   The "what changed" detail, moved off the drawer card. Renders at the top of
   the tab the visitor clicked into (?lbi_upd), above the highlighted content. */
.lbi-profile .lbi-prof-updnotice {
	position: relative; /* anchors the shared × */
	margin: 0;
	padding: .8rem 2.4rem .8rem 1rem;
	border-left: 3px solid var(--lp-go);
	border-radius: 0 var(--lp-radius) var(--lp-radius) 0;
	background: rgba(0, 133, 66, .07);
	animation: lbi-prof-celebrate-in .4s cubic-bezier(.22, 1, .36, 1) both;
	/* When profile.js scrolls to the notice, keep it clear of the fixed header. */
	scroll-margin-top: calc(var(--lbi-admin-h, 0px) + var(--lbi-bar-h, 52px) + 16px);
}

.lbi-profile .lbi-prof-updnotice__title {
	margin: 0 0 .25rem;
	font-weight: 700;
	font-size: 1.02rem;
	color: var(--lp-go-deep);
}

/* Two notices in one frame (tour-matcher + when-to-go re-run): air before the
   second title; the first keeps the frame's own top padding. */
.lbi-profile .lbi-prof-updnotice__title:not(:first-child) {
	margin-top: .7rem;
}

.lbi-profile .lbi-prof-updnotice__body {
	margin: 0;
	font-size: .9rem;
	line-height: 1.5;
	color: var(--lp-ink);
	max-width: var(--lp-measure);
}

/* "Now showing: <trip>" after a trip switch (Lbi_Profile_Bands, --switched). It
   shipped with no rule anywhere, so it rendered as bare text; give it the quiet
   framed shape of its sibling updnotice, without the celebrate animation. */
.lbi-profile .lbi-prof-notice--switched {
	margin: 0;
	padding: .7rem 1rem;
	border-left: 3px solid var(--lp-accent);
	border-radius: 0 var(--lp-radius) var(--lp-radius) 0;
	background: rgba(11, 114, 133, .06);
}
.lbi-profile .lbi-prof-notice__text {
	margin: 0;
	font-size: .9rem;
	line-height: 1.5;
	color: var(--lp-ink);
	max-width: var(--lp-measure);
}

/* ---- Trip-date band (Lbi_Profile_Bands::countdown_band) --------------------
   The forward twin of the past-trip band, in the green updnotice frame. State B
   is a countdown; State A asks for the date, with a dismiss × (position:relative
   anchors it) and a Save button in the trip-privacy switch shape. */
/* Persistent band, not a one-time notice: drop the updnotice frame's celebrate-in
   animation so it does not re-animate on every load (its twin .lbi-prof-past does
   not animate either). position:relative anchors the dismiss ×. */
.lbi-profile .lbi-prof-countdown { position: relative; animation: none; padding-right: 2.6rem; } /* keep text clear of the × (both states carry one) */
.lbi-profile .lbi-prof-countdown__lead {
	margin: 0 0 .25rem;
	font-weight: 700;
	font-size: 1.02rem;
	color: var(--lp-go-deep);
}
.lbi-profile .lbi-prof-countdown__line {
	margin: 0;
	font-size: .9rem;
	line-height: 1.5;
	color: var(--lp-ink);
	max-width: var(--lp-measure);
}
.lbi-profile .lbi-prof-countdown__form {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: .6rem;
	margin-top: .7rem;
}
.lbi-profile .lbi-prof-countdown__field {
	display: flex;
	flex-direction: column;
	gap: .2rem;
}
.lbi-profile .lbi-prof-countdown__label {
	font-size: .8rem;
	color: var(--lp-muted);
}
.lbi-profile .lbi-prof-countdown__input {
	font: inherit;
	font-size: .9rem;
	padding: .4rem .5rem;
	border: 1px solid var(--lp-rule);
	border-radius: var(--lp-radius);
	background: var(--lp-paper);
	color: var(--lp-ink);
}
.lbi-profile .lbi-prof-countdown__msg {
	margin: .5rem 0 0;
	min-height: 1.1em;
	font-size: .85rem;
	color: var(--lp-muted);
}
.lbi-profile .lbi-prof-countdown__msg--error { color: var(--lp-alert, #b3261e); }

/* State B (R1, 0.96.0): the resolved date, a quiet Change control that opens the
   inline editor, and the provenance line. */
.lbi-profile .lbi-prof-countdown__date { margin: .45rem 0 0; font-size: .9rem; color: var(--lp-ink); }
.lbi-profile .lbi-prof-countdown__when { font-weight: 600; }
/* Quiet underlined text control: theme opt-out (pierce uppercases buttons) plus a
   restated background on every interactive state (the 2026-08-14 / 09-14 rule, so
   the theme's green button:hover fill cannot leak). */
.lbi-profile .lbi-prof-countdown__change {
	margin-left: .5rem; padding: 0; border: 0; background: none;
	font: inherit; font-size: .85rem; font-weight: 600; letter-spacing: normal; text-transform: none;
	color: var(--lp-accent); text-decoration: underline; text-underline-offset: 2px; cursor: pointer;
}
.lbi-profile .lbi-prof-countdown__change:hover,
.lbi-profile .lbi-prof-countdown__change:focus,
.lbi-profile .lbi-prof-countdown__change:active { background: none; color: var(--lp-ink); }
.lbi-profile .lbi-prof-countdown__change:focus-visible { outline: 2px solid var(--lp-accent-bright); outline-offset: 2px; }
.lbi-profile .lbi-prof-countdown__prov { margin: .2rem 0 0; font-size: .82rem; color: var(--lp-muted); }
/* R1(c) step-nudge link, appended to the line. It is an <a> inside .content, so
   `.content .lbi-profile a` (0,2,1) strips the underline and `.content a:hover`
   (0,2,1) hijacks the hover colour — beat both with a .content ancestor bump
   (0,3,x), the file's D2 pattern (:191). Underlined so it reads as a real link. */
.lbi-profile .lbi-prof-countdown__nudge,
.content .lbi-profile .lbi-prof-countdown__nudge {
	color: var(--lp-accent); font-weight: 600; white-space: nowrap;
	text-decoration: underline; text-underline-offset: 2px;
}
.lbi-profile .lbi-prof-countdown__nudge:hover,
.content .lbi-profile .lbi-prof-countdown__nudge:hover { color: var(--lp-ink); }
/* __form is display:flex, so the editor's hidden state needs an explicit override. */
.lbi-profile .lbi-prof-countdown__form[hidden] { display: none; }

/* ---- First-run tour (Lbi_Profile_Bands::tour_band) -------------------------
   A dismissable hook modal + four-step carousel over a blurred backdrop.
   Rendered hidden; tour.js reveals it once per device. Titles and buttons opt
   out of the theme's global uppercase (pierce gotcha), same as the bands. */
.lbi-tour {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1rem;
	/* The root spans the viewport too: hit-testing belongs to the shade PANELS
	   and the card only, so the spotlight hole is genuinely clickable. */
	pointer-events: none;
}
.lbi-tour[hidden] { display: none; }

.lbi-tour__card {
	pointer-events: auto;
}

/* Four shade panels instead of one backdrop: tour.js sizes them around the
   spotlit tab, leaving a real hole so the tab stays crisp and undimmed. On the
   hook step the top panel covers the whole viewport. */
.lbi-tour__shade {
	position: absolute;
	inset: 0;
	/* The wrapper spans the viewport; only the PANELS may catch clicks, or the
	   spotlight hole would be visual-only and the tab in it unclickable. */
	pointer-events: none;
}

.lbi-tour__shade-panel {
	position: absolute;
	background: rgba(24, 30, 36, .45);
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
	pointer-events: auto;
}

/* The highlight ring around the spotlit tab. pointer-events none: the tab in
   the hole stays genuinely clickable. */
.lbi-tour__ring {
	position: absolute;
	border: 2px solid var(--lp-accent, #00708b);
	border-radius: 8px;
	box-shadow: 0 0 0 4px rgba(40, 195, 234, .3);
	pointer-events: none;
	transition: top .25s ease, left .25s ease, width .25s ease, height .25s ease;
}
.lbi-tour__ring[hidden] { display: none; }

/* During tab steps the card drops below the tab strip (tour.js sets
   --lbi-tour-top to the strip's bottom edge) so it never covers the tabs —
   which sit at the top, exactly where a centered card would land on phones. */
.lbi-tour.is-touring {
	align-items: flex-start;
	padding-top: var(--lbi-tour-top, 6rem);
}

/* "You're here now." chip on the step matching the tab the visitor landed on. */
.lbi-tour__here {
	display: inline-block;
	padding: .05rem .5rem;
	border-radius: 999px;
	background: rgba(0, 133, 66, .12);
	color: var(--lp-go-deep, #007033);
	font-size: .8rem;
	font-weight: 600;
	white-space: nowrap;
}

body.lbi-tour-open { overflow: hidden; }

.lbi-tour__card {
	position: relative;
	width: min(26rem, 100%);
	padding: 1.6rem 1.5rem 1.25rem;
	background: var(--lp-paper, #fffdf8);
	border: 1px solid var(--lp-rule, #e3ded4);
	border-radius: 12px;
	box-shadow: 0 24px 60px -20px rgba(0, 0, 0, .45);
	outline: none;
}

.lbi-tour__close {
	position: absolute;
	top: .5rem;
	right: .6rem;
	padding: .2rem .45rem;
	font-size: 1.3rem;
	line-height: 1;
	color: var(--lp-muted, #6b7280);
	background: none;
	border: 0;
	cursor: pointer;
}
.lbi-tour__close:hover { color: var(--lp-ink, #303942); }

.lbi-tour__step { display: none; }
.lbi-tour__step.is-active { display: block; }

.lbi-tour__title {
	margin: 0 0 .6rem;
	font-size: 1.25rem;
	line-height: 1.25;
	letter-spacing: normal;
	text-transform: none;
	color: var(--lp-ink, #303942);
}

.lbi-tour__kicker {
	margin: 0 0 .45rem;
	font-family: var(--lp-mono, monospace);
	font-size: .72rem;
	font-weight: 600;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--lp-accent, #00708b);
}

.lbi-tour__copy {
	margin: 0 0 1rem;
	font-size: .95rem;
	line-height: 1.55;
	color: var(--lp-ink, #303942);
}

.lbi-tour__actions {
	display: flex;
	flex-wrap: wrap;
	gap: .6rem;
	align-items: center;
}

.lbi-tour__btn {
	display: inline-block;
	padding: .55rem 1.1rem;
	border: 0;
	border-radius: var(--lp-radius, 6px);
	background: var(--lp-go, #008542);
	color: #fff;
	font-size: .9rem;
	font-weight: 600;
	letter-spacing: normal;
	text-transform: none;
	text-decoration: none;
	cursor: pointer;
}
.lbi-tour__btn:hover { background: var(--lp-go-deep, #007033); color: #fff; }

/* The CTA is an <a>: the theme's `.content a` outranks a lone class on color and
   underline (same leak as the save-block link), so bump with the ancestor. */
.lbi-tour .lbi-tour__btn,
.content .lbi-tour .lbi-tour__btn {
	color: #fff;
	background-image: none;
	text-decoration: none;
}
.lbi-tour .lbi-tour__btn--ghost,
.content .lbi-tour .lbi-tour__btn--ghost {
	color: var(--lp-muted, #6b7280);
}

.lbi-tour__btn--ghost {
	background: transparent;
	color: var(--lp-muted, #6b7280);
	border: 1px solid var(--lp-rule, #e3ded4);
}
.lbi-tour__btn--ghost:hover { background: rgba(0, 0, 0, .04); color: var(--lp-ink, #303942); }

.lbi-tour__nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: 1.1rem;
	padding-top: .8rem;
	border-top: 1px solid var(--lp-rule, #e3ded4);
}
.lbi-tour__nav[hidden] { display: none; }

.lbi-tour__navbtn {
	padding: .3rem .7rem;
	font-size: .85rem;
	font-weight: 600;
	letter-spacing: normal;
	text-transform: none;
	color: var(--lp-accent, #00708b);
	background: none;
	border: 0;
	cursor: pointer;
}
.lbi-tour__navbtn:disabled { opacity: .35; cursor: default; }
.lbi-tour__navbtn[hidden] { display: none; }

.lbi-tour__dots { display: inline-flex; gap: .4rem; }
.lbi-tour__dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--lp-rule, #d5d0c6);
}
.lbi-tour__dot.is-active { background: var(--lp-accent, #00708b); }

/* ---- "Start here" strip (Lbi_Profile_Bands::start_here_band) ---------------
   The inline counterpart to the one-shot tour: same eligibility, always visible
   until the first quiz result exists. */
.lbi-prof-start {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: .9rem 1.5rem;
	margin: 0;
	padding: 1.1rem 1.35rem;
	border: 1px solid rgba(0, 133, 66, .3);
	border-radius: var(--lp-radius, 6px);
	background: rgba(0, 133, 66, .06);
}

.lbi-prof-start__kicker {
	margin: 0 0 .3rem;
	font-family: var(--lp-mono, monospace);
	font-size: .72rem;
	font-weight: 600;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--lp-go-deep, #007033);
}

.lbi-prof-start__copy {
	margin: 0;
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.4;
	color: var(--lp-ink, #303942);
}

.lbi-prof-start__benefit {
	margin: .25rem 0 0;
	font-size: .85rem;
	color: var(--lp-muted, #6b7280);
}

.lbi-prof-start__side {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: .45rem;
}

.lbi-prof-start__btn {
	display: inline-block;
	padding: .6rem 1.2rem;
	border-radius: var(--lp-radius, 6px);
	background: var(--lp-go, #008542);
	color: #fff;
	font-size: .92rem;
	font-weight: 600;
	letter-spacing: normal;
	text-transform: none;
	text-decoration: none;
}
.lbi-prof-start__btn:hover { background: var(--lp-go-deep, #007033); color: #fff; }
/* Ancestor bump beats the theme's `.content a` on color (same leak as the tour CTA). */
.lbi-prof-start .lbi-prof-start__btn,
.content .lbi-prof-start .lbi-prof-start__btn {
	color: #fff;
	background-image: none;
	text-decoration: none;
}

.lbi-prof-start__tour {
	padding: 0;
	font-size: .8rem;
	letter-spacing: normal;
	text-transform: none;
	color: var(--lp-accent, #00708b);
	background: none;
	border: 0;
	text-decoration: underline;
	text-underline-offset: 2px;
	cursor: pointer;
}
.lbi-prof-start__tour:hover { color: var(--lp-ink, #303942); }

@media (max-width: 560px) {
	.lbi-prof-start { flex-direction: column; align-items: flex-start; }
}

/* ---- One-time-code inputs: one digit per cell -----------------------------
   The recover and delete-confirm code fields render as six square cells (one
   per digit) while staying a SINGLE input, so a 6-digit paste and iOS's
   one-time-code autofill land in one go (Gerrit, 2026-08-20). The cells are
   painted with ch-unit background gradients keyed to the same mono font the
   digits use, so digit and cell widths cannot drift apart:
   cell box 2.1ch + .45ch gap = a 2.55ch period; letter-spacing pads each 1ch
   digit to the period, padding-left centers it in its box. background-size
   stops the repeating gradient after the sixth box. Placed last in the file
   on purpose: it must override both fields' earlier underline styling. */
.lbi-prof-recover__codeinput,
.lbi-prof-reset__codeinput {
	width: 15.5ch;
	max-width: 100%;
	box-sizing: content-box;
	padding: .55rem 0 .55rem .55ch;
	border: 0;
	border-radius: 0;
	font-family: var(--lp-mono);
	font-size: 1.3rem;
	font-variant-numeric: tabular-nums;
	letter-spacing: 1.55ch;
	color: var(--lp-ink);
	caret-color: var(--lp-accent);
	background-color: transparent;
	background-image:
		repeating-linear-gradient(to right, var(--lp-leader) 0 2.1ch, transparent 2.1ch 2.55ch),
		repeating-linear-gradient(to right, rgba(42, 51, 59, .05) 0 2.1ch, transparent 2.1ch 2.55ch);
	background-repeat: no-repeat, no-repeat;
	background-size: 14.85ch 2px, 14.85ch 100%;
	background-position: left bottom, left top;
	overflow: hidden;
}
.lbi-prof-recover__codeinput:focus,
.lbi-prof-reset__codeinput:focus {
	outline: none;
	border: 0;
	background-image:
		repeating-linear-gradient(to right, var(--lp-accent) 0 2.1ch, transparent 2.1ch 2.55ch),
		repeating-linear-gradient(to right, rgba(0, 112, 139, .07) 0 2.1ch, transparent 2.1ch 2.55ch);
}
.lbi-prof-recover__codeinput::placeholder,
.lbi-prof-reset__codeinput::placeholder {
	color: transparent;
}

/* The legal link in the fine print: .content a (0,1,1) would repaint it theme-blue
   and the a blanket (0,2,1) would strip its underline. Bump above both (0,3,0) so it
   inherits the fine-print colour and keeps its underline (item 4). */
.content .lbi-profile .lbi-prof-head__privacy { color: inherit; text-decoration: underline; }

/* ---- Footer: "Already saved a trip? Get it back" (0.56.0) ---------------- */
/* "I already have a code" (0.72.4): a quiet text control under the email
   form; hidden by the JS once the code field is showing. */
.lbi-prof-recover__havecode {
	background: none;
	border: 0;
	padding: 0;
	margin: 6px 0 0;
	font: inherit;
	font-size: 0.9em;
	color: #0d6b78;
	text-decoration: underline;
	text-transform: none;
	letter-spacing: normal;
	cursor: pointer;
}
.lbi-prof-recover__havecode[hidden] {
	display: none;
}
/* The same recover card the empty state shows, collapsed, between the
   other-trips row and the link-reset block. The card brings its own border;
   the wrapper only spaces and rules it like its neighbours. */
/* Footer subsections each render in their own <section>. Since 0.95.0 (R5) ONE
   rule owns every gap between them: the zone flex-gap (--lp-gap) sits above the
   hairline and an equal pad below it, so saved / other-trips / link-reset /
   clean-slate / recover share the identical rhythm. The old per-band padding
   and dead band-sibling rules (bands live in separate sections, so `band +
   band` never matched) are gone; "Reset my trip link" was the visibly tighter
   one only because it carried its own intra-block padding. */
.lbi-profile__zone--footer .lbi-profile__section + .lbi-profile__section {
	margin-top: 0;
	padding-top: var(--lp-gap);
	border-top: 1px solid var(--lp-rule);
}
.lbi-prof-recover-footer .lbi-prof-reset__lead { margin-bottom: .45rem; }
.lbi-prof-recover-footer .lbi-prof-recover { margin-top: 0; }
/* Collapsed, the footer toggle is one outlined button among its siblings
   (Start over, Delete this trip); the paper card around it made it read as a
   different component (Gerrit's Safari pass, 2026-08-29). The card comes back
   only once the disclosure is open and holds a form. */
.lbi-prof-recover-footer .lbi-prof-recover:not(.is-open) {
	padding: 0;
	border: 0;
	background: none;
}

/* ---- Footer: the saved-trip notice (2026-09-17) --------------------------- */
/* Leads Trip privacy once an address is on file: a paragraph in the footer
   voice with a verify pill, then two buttons in the Trip-privacy button shape.
   Bare band, no card. First footer section, so the footer "+ section" rule
   gives it a hairline BELOW, not above (no per-band padding since 0.95.0). */
.lbi-prof-savednote__lead {
	margin: 0 0 .7rem;
	font-size: .88rem;
	line-height: 1.5;
	color: var(--lp-muted);
	max-width: var(--lp-measure);
}
.lbi-prof-savednote__email { color: var(--lp-ink); font-weight: 600; }
.lbi-prof-savednote__actions { display: flex; flex-wrap: wrap; gap: .6rem; }
/* The change form is a bare band here (not the header's right-aligned column),
   so bound it and read it left instead of a full-column centred input. */
.lbi-prof-savednote .lbi-prof-identity--change { max-width: 24rem; justify-content: flex-start; }
/* Same shape as .lbi-prof-othertrips__switch: the shared blue outline, sentence
   case, compact size (R2, 0.95.0 — was ink outline). */
.lbi-prof-savednote__btn {
	flex: 0 0 auto;
	padding: .45em .9em;
	font-size: .85rem;
	font-weight: 600;
	text-transform: none;
	letter-spacing: normal;
	cursor: pointer;
}

/* Verify-state pills: a cheery green pill with a checkmark when verified, a
   quiet grey one while pending (Gerrit, 2026-09-17). */
.lbi-prof-pill {
	display: inline-flex;
	align-items: center;
	gap: .3rem;
	border-radius: 999px;
	padding: .12rem .55rem .12rem .45rem;
	font-size: .72rem;
	font-weight: 700;
	line-height: 1.4;
	vertical-align: middle;
	margin-left: .25rem;
}
.lbi-prof-pill--ok { background: rgba(0, 133, 66, .12); color: var(--lp-go-deep); }
.lbi-prof-pill--ok::before { content: "✓"; }
.lbi-prof-pill--pending { background: rgba(104, 115, 124, .12); color: var(--lp-muted); }

/* ---- Footer: "Your other trips" (0.55.0) ---------------------------------- */
/* Sits above the link-reset block under the Trip privacy heading; same voice.
   Gap to its neighbours is the footer "+ section" rhythm rule (no per-band
   padding since 0.95.0, R5). */
.lbi-prof-othertrips .lbi-prof-reset__lead { margin-bottom: .3rem; }
.lbi-profile .lbi-prof-othertrips__list { list-style: none; margin: 0; padding: 0; }
.lbi-prof-othertrips__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .9rem;
	padding: .5rem 0;
	border-top: 1px solid var(--lp-rule);
	font-size: .92rem;
}
.lbi-prof-othertrips__row:first-child { border-top: 0; }
.lbi-prof-othertrips__facts { flex: 1 1 auto; min-width: 0; }
/* Compact size only; colour/border/hover fill come from the shared
   .lbi-prof-reset__start rule (R2, 0.95.0). */
.lbi-prof-othertrips__switch {
	flex: 0 0 auto;
	padding: .45em .9em;
	font-size: .85rem;
	font-weight: 600;
	text-transform: none;
	letter-spacing: normal;
	cursor: pointer;
}
.lbi-prof-othertrips__switch:disabled { opacity: .55; cursor: default; }
/* Per-row "Delete this trip" (0.58.0): quiet text control beside Open; the
   confirm borrows the danger frame from "Delete everything". */
.lbi-prof-othertrips__actions { display: flex; flex: 0 0 auto; align-items: center; gap: .6rem; }
/* 0.63.0: the same button shape as Open, tinted toward the danger red so the
   pair reads as two actions of one weight (Gerrit, 2026-08-23). */
.lbi-prof-othertrips__delete {
	flex: 0 0 auto;
	padding: .45em .9em;
	font-size: .85rem;
	font-weight: 600;
	text-transform: none;
	letter-spacing: normal;
	color: var(--lp-signal, #9a2f22);
	background: none;
	border: 1px solid currentColor;
	border-radius: 6px;
	cursor: pointer;
}
/* Rest: red text on white. :focus is restated FIRST (before :hover/:active, same
   0,2,0 specificity) so no theme green fill leaks on tap and a focused-only
   button keeps red text; :hover/:active fill red with white text (R2, 0.95.0).
   #fff on #9a2f22 ≈ 7.6:1. */
.lbi-prof-othertrips__delete:focus { background: none; color: var(--lp-signal, #9a2f22); }
.lbi-prof-othertrips__delete:hover,
.lbi-prof-othertrips__delete:active {
	background: var(--lp-signal);
	border-color: var(--lp-signal);
	color: #fff;
}
.lbi-prof-othertrips__delete:focus-visible { outline: 2px solid var(--lp-signal); outline-offset: 2px; }
.lbi-prof-othertrips__row { flex-wrap: wrap; }
.lbi-prof-othertrips__confirm { flex: 1 1 100%; margin-top: .4rem; }
.lbi-prof-othertrips__msg { margin: .5rem 0 0; font-size: .88rem; }
@media (max-width: 480px) {
	.lbi-prof-othertrips__row { flex-direction: column; align-items: flex-start; }
}

/* ---------------------------------------------------------------------------
 * "Before you go": the trip checklist on the Trip details tab (0.71.0).
 * Same card as the drawer's, at page scale. Links get the .content a bump
 * (color + no gradient marker); buttons opt out of the theme uppercase.
 * ------------------------------------------------------------------------- */
.lbi-prof-checklist__intro {
	margin: 0 0 1rem;
	font-size: .95rem;
	color: var(--lp-muted);
	max-width: var(--lp-measure);
}
.lbi-prof-checklist__title {
	font-family: var(--lp-mono);
	font-size: .72rem;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--lp-muted);
	font-weight: 700;
	margin: 1.25rem 0 .5rem;
}
.lbi-prof-checklist__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: .5rem;
}
/* The theme's .entry-content ul (0,1,1) beats that (0,1,0) reset: the same
   .lbi-profile bump every other dashboard list carries (see the recs /
   savedlist rule), or the sheet's list gets a 40px indent and disc bullets
   (Gerrit's phone pass, 2026-09-02). */
.lbi-profile .lbi-prof-checklist__list {
	list-style: none;
	margin-left: 0;
	padding-left: 0;
}
.lbi-profile .lbi-prof-checklist__list > li {
	list-style: none;
	margin-left: 0;
}
.lbi-prof-check {
	margin: 0;
	padding: .75rem .9rem;
	border: 1px solid var(--lp-rule);
	border-radius: var(--lp-radius);
	background: #fff;
}
.lbi-prof-checklist__list--later .lbi-prof-check {
	background: transparent;
}
.lbi-prof-check--done .lbi-prof-check-text {
	text-decoration: line-through;
	color: var(--lp-muted);
}
.lbi-prof-check--skip .lbi-prof-check-text {
	color: var(--lp-muted);
}
/* Settled sections read by color (Gerrit, 2026-09-13): Done and Saved for
   later green, Not for this trip the muted lava red. Accent edge + flash. */
.lbi-prof-checklist__list--done .lbi-prof-check,
.lbi-prof-checklist__list--saved .lbi-prof-check { border-left: 3px solid var(--lp-go); }
.lbi-prof-checklist__list--skip .lbi-prof-check { border-left: 3px solid var(--lp-signal); }
.lbi-prof-check-text {
	margin: 0 0 .4rem;
	font-size: .95rem;
	line-height: 1.45;
}
.lbi-prof-check-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: .4rem .75rem;
}
/* Several links on one item (the merged multi-island lodging card) sit together. */
.lbi-prof-check-links {
	display: inline-flex;
	flex-wrap: wrap;
	gap: .3rem 1rem;
}
.lbi-prof-checklist .lbi-prof-check-link {
	font-size: .9rem;
	font-weight: 700;
	color: var(--lp-accent);
	background-image: none;
	text-decoration: none;
}
.lbi-prof-checklist .lbi-prof-check-link::after {
	content: '\203A';
	margin-left: .3rem;
}
.lbi-prof-checklist .lbi-prof-check-link:hover {
	text-decoration: underline;
}
.lbi-prof-check-actions {
	display: inline-flex;
	gap: .35rem;
}
.lbi-prof-check-btn {
	margin: 0;
	padding: .3em .7em;
	border: 1px solid var(--lp-rule);
	border-radius: 999px;
	background: #fff;
	color: #2a333b;
	font-size: .8rem;
	font-weight: 600;
	line-height: 1.3;
	text-transform: none;
	letter-spacing: normal;
	cursor: pointer;
}
.lbi-prof-check-btn:hover,
.lbi-prof-check-btn:focus-visible {
	border-color: var(--lp-accent);
	color: var(--lp-accent);
	background: #fff;
}
.lbi-prof-check-btn--undo {
	color: var(--lp-muted);
}
/* Not for this trip reads red, matching its settled row (A5, 2026-09-13); Undo
   stays muted. */
.lbi-prof-check-btn--skip {
	color: var(--lp-signal);
}
/* "Save for later" reads green like Done, matching its settled row (A5). */
.lbi-prof-check-btn--save {
	color: var(--lp-go-deep);
	border-color: var(--lp-go);
}
.lbi-prof-check-btn[disabled] {
	opacity: .5;
	cursor: default;
}

/* ---- Stale-tab notice (M14) ------------------------------------------------
   profile.js inserts this at the top of .lbi-profile when an owner-scoped action
   is refused (409) because the trip in the cookie is no longer the one the page
   shows. Amber, not the green celebrate palette: this is a "stop and reload". */
.lbi-profile .lbi-prof-stale {
	margin: 0;
	padding: .8rem 1rem;
	border-left: 3px solid #b45309;
	border-radius: 0 var(--lp-radius) var(--lp-radius) 0;
	background: rgba(180, 83, 9, .08);
	scroll-margin-top: calc(var(--lbi-admin-h, 0px) + var(--lbi-bar-h, 52px) + 16px);
}

.lbi-profile .lbi-prof-stale p {
	margin: 0;
	font-size: .95rem;
	line-height: 1.5;
	color: var(--lp-ink);
	max-width: var(--lp-measure);
}

/* Opt out of the pierce theme's global button uppercase (CLAUDE.md gotcha). */
.lbi-profile .lbi-prof-stale__reload {
	text-transform: none;
	letter-spacing: normal;
	margin-left: .3rem;
	padding: .25rem .7rem;
	border: 1px solid #b45309;
	border-radius: var(--lp-radius);
	background: #b45309;
	color: #fff;
	font-size: .9rem;
	cursor: pointer;
}

/* ---- Your trip emails (0.74.0): describe-only band under the meter ---- */
/* Tab 5 root paints nothing (Gerrit, 2026-09-13, item 11): the kicker/h2/lead
   sit on the section gutter and the two __block groups are the cards, matching
   tab 4's .lbi-prof-recs. The Overview surfaces (.lbi-prof-emails-card) stay
   bounded cards; only this full-tab root goes flat. */
.lbi-prof-emails {
	margin-top: 0;
	scroll-margin-top: 90px;
}
/* The overview email surfaces (teaser + nudge) are bounded cards. No margin of
   their own: the framework's .lbi-profile__zone flex-gap spaces them, so a
   margin here would double the gap (the 0.84.0 whitespace fix, Gerrit). */
.lbi-prof-emails-card {
	position: relative;
	scroll-margin-top: 90px;
}
/* Shared dismiss control: the × on the newsletter card and the celebration
   band (data-lbi-dismiss). Absolutely placed, so its band is position:relative. */
.lbi-prof-dismiss {
	position: absolute;
	top: .45rem;
	right: .45rem;
	width: 1.75rem;
	height: 1.75rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--lp-muted);
	font-size: 1.35rem;
	line-height: 1;
	cursor: pointer;
	text-transform: none;
}
.lbi-prof-dismiss:hover { background: rgba(0, 0, 0, .06); color: var(--lp-ink); }
/* The class rule's display would otherwise override the browser's [hidden]
   default, showing the × before JS reveals it and leaving a dead control with
   no JS. Restate the hidden state at higher specificity (Sol review 2026-09-12). */
.lbi-prof-dismiss[hidden] { display: none; }
/* Keep the dismiss control clear of the heading it sits beside. */
.lbi-prof-emails-card .lbi-prof-emails__title { padding-right: 1.75rem; }

/* Shared fade + collapse when a dismissable band is removed (celebration ×,
   newsletter ×). max-height is set inline to the real height first, then this
   rule animates it to 0 (0.18-0.22s). JS removes the wrapper on transitionend. */
.lbi-profile__section.is-dismissing {
	overflow: hidden;
	transition: opacity .18s ease, max-height .22s ease, margin .22s ease, padding .22s ease;
	opacity: 0;
	max-height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
}
@media (prefers-reduced-motion: reduce) {
	.lbi-profile__section.is-dismissing { transition: none; }
}
/* Belt for the JS zone/group cleanup: a group left with no section collapses
   so it never carries its 48px bottom margin as a phantom gap (a saved
   visitor's header group, once the identity row moves to Trip privacy). */
.lbi-profile__group:not(:has(.lbi-profile__section)) { display: none; }
.lbi-prof-emails__subscribe { margin: 0 0 .7rem; }
.lbi-prof-emails__kicker { display: inline-block; margin-bottom: .35rem; font-family: var(--lp-mono); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--lp-muted); }
.lbi-prof-emails__title { margin: 0 0 .4rem; font-size: 1.05rem; line-height: 1.3; color: var(--lp-ink); text-transform: none; letter-spacing: normal; }
.lbi-prof-emails__lead { margin: 0 0 .7rem; font-size: .92rem; line-height: 1.55; max-width: var(--lp-measure); }
.lbi-prof-emails__status { margin: 0 0 1rem; font-size: .88rem; color: var(--lp-muted); }
.lbi-prof-emails__tag { display: inline-block; font-family: var(--lp-mono); font-size: .64rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; border: 1px dashed var(--lp-leader); border-radius: 4px; padding: 2px 6px; margin-right: 6px; color: var(--lp-ink); }
.lbi-prof-emails__offer { border-top: 1px solid var(--lp-rule); padding-top: .9rem; }
.lbi-prof-emails__offer .lbi-prof-emails__lead { margin-bottom: .9rem; }
.lbi-prof-emails .lbi-prof-emails__more,
.lbi-prof-emails-teaser .lbi-prof-emails__more { color: var(--lp-accent); background-image: none; text-decoration: underline; text-underline-offset: 2px; }
.lbi-prof-emails__more-line { margin: .15rem 0 0; font-size: .85rem; }
/* An <a> styled as a button needs an ancestor bump to beat the theme's
   `.content a` (0,1,1) on link colour, exactly like __more above. A <button>
   is unaffected, but the extra selectors are harmless. (Measured 2026-09-12:
   the teaser anchor computed #303942, the theme ink, without this.) */
.lbi-prof-emails .lbi-prof-emails__btn,
.lbi-prof-emails-teaser .lbi-prof-emails__btn,
.lbi-prof-emails-nudge .lbi-prof-emails__btn { color: var(--lp-accent); }
.lbi-prof-emails__offer-line { margin: 0 0 .6rem; font-size: .9rem; line-height: 1.5; }
.lbi-prof-emails__check { color: var(--lp-go); font-weight: 700; margin-right: 4px; }
.lbi-prof-emails__btn { font: inherit; font-weight: 700; font-size: .9rem; padding: 9px 16px; border: 1px solid var(--lp-accent); border-radius: var(--lp-radius); background: transparent; color: var(--lp-accent); cursor: pointer; text-transform: none; letter-spacing: normal; }
/* The no-email "save this trip to an email to unlock" CTA is an <a> that jumps to
   the email field, not a <button>: it needs inline-block so its padding/border box
   renders (an inline <a> would collapse them). Colour + gradient are handled above. */
a.lbi-prof-emails__btn { display: inline-block; text-decoration: none; }
.lbi-prof-emails__btn:hover:not(:disabled) { background: rgba(0, 112, 139, .06); }
.lbi-prof-emails__btn:disabled { opacity: .7; cursor: default; }
/* pierce paints a <button> green on hover/focus/active. In the emails tab, own
   that green with WHITE text so the subscribe CTA is readable on tap instead of
   accent-on-green (Gerrit, 2026-09-14). The .lbi-prof-emails ancestor (0,2,1)
   beats the rest-colour rule just above (0,2,0). */
.lbi-prof-emails .lbi-prof-emails__btn:hover:not(:disabled),
.lbi-prof-emails .lbi-prof-emails__btn:focus:not(:disabled),
.lbi-prof-emails .lbi-prof-emails__btn:active:not(:disabled) {
	background: var(--lp-go);
	border-color: var(--lp-go);
	color: #fff;
}
/* Card rhythm: a touch more air above the button, and drop the empty aria-live
   note so it stops padding the space below the button (Gerrit, 2026-09-14). */
.lbi-prof-emails__ctl { margin-top: .5rem; }
.lbi-prof-emails__note:empty { display: none; }
/* Subscribed-confirmation line under the course button. */
.lbi-prof-emails__confirm { margin: .5rem 0 0; font-size: .85rem; line-height: 1.5; color: var(--lp-go-deep); }
.lbi-prof-emails__note { display: block; margin-top: .45rem; font-size: .82rem; color: var(--lp-muted); }

/* Email-preferences tab — per-kind cards (Step 3 markup). Each kind is its own
   card like the other dashboard tabs, not a bare list item. Scoped under
   .lbi-profile so it outranks the theme's .content li list styling. */
.lbi-profile .lbi-prof-emails__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .7rem; }
.lbi-profile .lbi-prof-emails__card { list-style: none; display: flex; flex-direction: column; gap: .35rem; margin: 0; padding: 1rem 1.1rem; background: var(--lp-paper); border: 1px solid var(--lp-rule); border-radius: var(--lp-radius); }
.lbi-profile .lbi-prof-emails__card::before, .lbi-profile .lbi-prof-emails__card::marker { content: none; }
.lbi-prof-emails__card-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .35rem .6rem; }
.lbi-prof-emails__card-title { min-width: 0; font-weight: 700; font-size: 1rem; color: var(--lp-ink); text-transform: none; letter-spacing: normal; }
.lbi-prof-emails__chip { flex: none; font-family: var(--lp-mono); font-size: .62rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--lp-muted); border: 1px solid var(--lp-rule); border-radius: 999px; padding: 3px 8px; white-space: nowrap; }
/* A subscribed (on) kind reads green, top-right of the card. */
.lbi-prof-emails__chip--subscribed { color: var(--lp-go); border-color: var(--lp-go); background: rgba(0, 133, 66, .08); }
.lbi-prof-emails__card-summary { margin: 0; font-size: .9rem; line-height: 1.5; color: var(--lp-muted); }
.lbi-prof-emails__ctl { margin: .35rem 0 0; }
.lbi-prof-emails__locked { margin: .35rem 0 0; font-size: .84rem; color: var(--lp-muted); }
/* "Now available" and "Coming soon" are two SECTIONS, each its own card on the
   page background with the band between them (Gerrit, 2026-09-13). Before, the
   coming-soon cards were transparent + dashed inside one panel, so the white
   "gave way" to the background and reopened: it read as a gap, not a section.
   Now the block is the card, and the per-kind rows inside sit flat (no
   card-in-card nesting), split by hairlines. */
.lbi-prof-emails__block-title { margin: 0 0 .7rem; font-size: .92rem; font-weight: 700; color: var(--lp-ink); text-transform: none; letter-spacing: normal; }
.lbi-prof-emails__block + .lbi-prof-emails__block { margin-top: 1.4rem; }
/* Air between the intro (on the flat root) and the first block card (A6). */
.lbi-prof-emails__lead + .lbi-prof-emails__block, .lbi-prof-emails p + .lbi-prof-emails__block { margin-top: 1rem; }
.lbi-profile .lbi-prof-emails__block .lbi-prof-emails__card { background: transparent; border: 0; border-top: 1px solid var(--lp-rule); border-radius: 0; padding: .75rem 0; }
.lbi-profile .lbi-prof-emails__block .lbi-prof-emails__card:first-child { border-top: 0; padding-top: 0; }
/* Coming-soon kinds still read muted (the grey set), scoped to the later block. */
.lbi-prof-emails__block--later .lbi-prof-emails__card-title { color: var(--lp-muted); }
.lbi-profile .lbi-prof-emails--locked .lbi-prof-emails__card { background: transparent; border-style: dashed; }
.lbi-prof-emails--locked .lbi-prof-emails__card-title { color: var(--lp-muted); }

/* ---- "Before you go" checklist: save-for-later cues (Gerrit, 2026-09-13) ---- */
/* The glide: a fixed ghost of the tapped card travels to its new row — Done,
   Saved for later, or Not for this trip (the sheet is swapped wholesale, so the
   real card is destroyed); the row then flashes once so the eye lands there.
   Reduced-motion keeps the flash only; profile.js skips the ghost. An opaque body
   (shadow + white fill) so it stays visible while travelling over the off-white
   page, and opacity is animated separately + only on arrival, not while moving
   (item 8b, 2026-09-13). The gentler transform curve keeps a short hop visibly
   moving for its whole duration. */
/* z-index MUST clear the pierce theme's .site-inner (position:relative;
   z-index:99, themes/pierce/style.css) and the fixed .site-header (z-index:999):
   the ghost is a fixed child of <body>, so at z-index 60 it painted BEHIND all
   page content and the glide was invisible on the live dashboard at every
   distance (Gerrit, 2026-09-13). 9999 floats it above the header and content but
   below the drawer / WP toolbar tier (100000). Do not lower it. */
.lbi-prof-check--ghost { position: fixed; z-index: 9999; margin: 0; pointer-events: none; box-sizing: border-box; transform-origin: top left; background: #fff; box-shadow: 0 10px 28px rgba(42, 51, 59, .22); transition: transform .65s ease-in-out, opacity .2s ease; }
.lbi-prof-check--landed { animation: lbi-prof-land .9s ease-out 1; }
@keyframes lbi-prof-land { 0% { background: rgba(0, 133, 66, .16); } 100% { background: transparent; } }
/* Red twin for the Not-for-this-trip glide (wired by C3's JS). The flash is a
   one-shot background-color fade, not vestibular motion, so it plays even under
   prefers-reduced-motion — that IS the "flash only" reduced-motion path (the
   travelling ghost is skipped in JS by the matchMedia check). Fable review F3. */
.lbi-prof-check--landed-skip { animation: lbi-prof-land-skip .9s ease-out 1; }
@keyframes lbi-prof-land-skip { 0% { background: rgba(154, 47, 34, .12); } 100% { background: transparent; } }
/* The line under "Saved for later": why these sit here, and that they also live
   on the Saved tab. The <a> needs the ancestor bump to beat the theme's .content a. */
.lbi-prof-checklist__note { margin: -.2rem 0 .7rem; font-size: .85rem; line-height: 1.5; color: var(--lp-muted); }
/* Inline "that didn't save" line after a refused settle (item B3, 2026-09-13). */
.lbi-prof-checklist__error { margin: .6rem 0 0; font-size: .88rem; color: var(--lp-signal); }
.lbi-prof-checklist .lbi-prof-checklist__note-link { color: var(--lp-accent); background-image: none; text-decoration: underline; text-underline-offset: 2px; }
/* Its own light card now that the root is flat (A6, 2026-09-13): a bare top-rule
   seam would leave the footer note floating on the section gutter. */