/*
	Treatment Plans on oliver-rmt.com: the directory and its articles (Stage 4).
	Source: directory-build/assets/kw.css. The build copies it to Oliver-RMT_website/assets/css/treatment-plans.css
	with a version tag; don't edit the copy.

	Builds on the site's styles.css ("Dusk Gradient": its tokens, gradients, rings, condition cards, chips, red flags,
	leaders and typical-course box). TIW's directory tools come over as behaviour only, drawn here in the site's own
	colours (oliver-rmt DECISIONS "Stage 4"). Everything is scoped under .tp. The site-wide pieces (Read more, Reduce
	Motion, phone rules) are in styles.css.
*/

.tp [hidden]:not([hidden="until-found"]) { display: none; }   /* until-found: closed Read more text stays findable (site.js) */
/* tab panels and area groups are <section>s for their headings; the site's default section padding isn't theirs */
.tp .page, .tp .tp-area { padding: 0; }
.tp .vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.tp .icon { width: 1.05rem; height: 1.05rem; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Directory: the description under the title, with Read more ---------- */
/* TIW's description box, in the hero's parchment card: a faint wash with a thin ochre edge on the left. "Read more +"
   is part of the sentence, right after the last word when it fits; opened, it fades and the text slides open with the
   X at the bottom right (kw-ui.js). */
.tp .tp-intro {
	position: relative; max-width: 36rem; margin: 0 0 1.4rem; padding: .8rem 1rem .85rem 1.5rem; border-radius: var(--radius);
	background: rgba(43, 51, 39, 0.05);
}
/* Stage 5: the left edge becomes the site's slash, in the new accent (styles.css .slash-box) */
.tp .tp-intro::before {
	content: ""; position: absolute; left: .55rem; top: .8rem; height: min(2.8rem, calc(100% - 1.6rem)); width: 3px; border-radius: 2px;
	background: var(--ochre); transform: skewX(-14deg);
}
.tp .tp-intro-lead { margin: 0; font-size: 1.05rem; color: #3c4030; }
.tp .tp-intro p { color: #3c4030; }
.tp .tp-intro-more {
	display: inline-flex; align-items: center; gap: .3rem; margin: 0; padding: 0 0 0 .35rem; border: 0; background: none;
	color: var(--ochre); font: 600 .7rem/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; white-space: nowrap;
	vertical-align: .05em; cursor: pointer; transition: opacity .5s ease;
}
.tp .tp-intro-more .x-icon { width: 1.1rem; height: 1.1rem; margin: 0; transition: transform .6s cubic-bezier(.4, 0, .2, 1); }
.tp .tp-intro-more .x-icon i { width: .8rem; margin-left: -.4rem; }
.tp .tp-intro-more[aria-expanded="true"] { position: absolute; opacity: 0; visibility: hidden; transition: opacity .4s ease, visibility 0s linear .4s; }
.tp .tp-intro-more[aria-expanded="true"] .x-icon { transform: rotate(45deg); }
.tp .tp-intro .more-inner > :first-child { margin-top: .8rem; }
.tp .tp-intro .leaders { gap: .55rem 1.2rem; margin-bottom: .4rem; }
.tp .tp-intro .leader { align-items: flex-start; }
.tp .tp-intro .leader .pt { margin-top: .35rem; }
.tp .tp-intro .leader .ln { margin-top: .55rem; flex: none; }
.tp .tp-intro .leader .lb { text-transform: none; font-size: .9rem; letter-spacing: 0; }
.tp .tp-intro-close {
	display: flex; margin: -.2rem -.3rem -.3rem auto; padding: .3rem; border: 0; background: none; color: var(--ochre); cursor: pointer;
	opacity: 0; visibility: hidden; transition: opacity .4s ease, visibility 0s linear .4s;
}
.tp .tp-intro-close .x-icon { margin: 0; transform: rotate(45deg); }
.tp .tp-intro.is-open .tp-intro-close { opacity: 1; visibility: visible; transition: opacity .5s ease .45s, visibility 0s; }
.tp .tp-intro:not(.is-open) .tp-intro-close { position: absolute; }   /* takes no room while closed */
html.reduce-motion .tp .tp-intro-more, html.reduce-motion .tp .tp-intro-more .x-icon, html.reduce-motion .tp .tp-intro-close { transition: none; }
.tp .hub-hero-textcard h1 { max-width: 26ch; }

/* ---------- Directory: the filter bar ---------- */
/* The site's floating panel (smoked campfire glass, cream chips), with TIW's behaviour: two modes (filters, or a search
   box in their place), Shrink folds it to one line, and it sticks while you scroll the directory, on phones too (each
   filter group becomes one swipeable row there, so the bar stays short). A campfire edge down its left side. */
.tp .tp-directory { position: relative; }
.tp .filter-bar {
	position: sticky; top: .75rem; z-index: 10;
	margin: .5rem 0 1.6rem; padding: .65rem 1.1rem .8rem calc(1.1rem + 3px); border-radius: var(--radius);
	background: rgba(55, 38, 15, 0.8);
	-webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
	box-shadow: inset 3px 0 0 var(--campfire), inset 0 0 0 1px rgba(243, 233, 216, 0.16);
	color: var(--cream);
	transition: background-color .25s, box-shadow .25s;
}
.tp .filter-bar.is-stuck {
	background: rgba(55, 38, 15, 0.92);
	box-shadow: inset 3px 0 0 var(--campfire), inset 0 0 0 1px rgba(243, 233, 216, 0.16), 0 12px 26px -12px rgba(0, 0, 0, 0.55);
}
.tp .fbar-head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; min-height: 2.4rem; }
.tp .fbar-mode {
	display: inline-flex; flex: none; align-items: center; justify-content: center; width: 2.4rem; height: 2.4rem; padding: 0;
	border: 0; border-radius: 999px; background: rgba(243, 233, 216, .06); box-shadow: inset 0 0 0 1px rgba(243, 233, 216, .34);
	color: var(--cream); cursor: pointer; overflow: hidden;
	transition: width .3s cubic-bezier(.4, 0, .2, 1), margin .3s cubic-bezier(.4, 0, .2, 1), opacity .25s ease, transform .3s cubic-bezier(.4, 0, .2, 1), visibility 0s;
}
.tp .fbar-mode:hover { box-shadow: inset 0 0 0 1px var(--campfire); }
.tp .fbar-mode > span, .tp .fbar-now-icon { display: inline-flex; }
.tp .fbar-mode .icon { width: 1.15rem; height: 1.15rem; }
/* shrunk, the switch slides away to tidy the bar, and slides back in when it opens */
.tp .filter-bar.is-shrunk .fbar-mode {
	width: 0; margin-right: -.75rem; opacity: 0; transform: translateX(-.8rem); visibility: hidden;
	transition: width .3s cubic-bezier(.4, 0, .2, 1), margin .3s cubic-bezier(.4, 0, .2, 1), opacity .2s ease, transform .3s cubic-bezier(.4, 0, .2, 1), visibility 0s linear .3s;
}
.tp .filter-bar[data-mode="filter"] .fbar-mode .is-filter, .tp .filter-bar[data-mode="search"] .fbar-mode .is-search,
.tp .filter-bar[data-mode="filter"] .fbar-now-icon.is-search, .tp .filter-bar[data-mode="search"] .fbar-now-icon.is-filter { display: none; }
.tp .filter-bar[data-mode="search"] .fbar-now { cursor: text; }
.tp .fbar-now { flex: 1; display: flex; align-items: center; gap: .55rem; min-width: 0; margin: 0; overflow: hidden; color: var(--cream); font-size: .88rem; white-space: nowrap; }
.tp .fbar-now-icon { flex: none; color: var(--campfire); }
.tp .fbar-search { position: relative; margin: .55rem 0 .1rem; }
.tp .fbar-search .icon { position: absolute; left: .85rem; top: 50%; margin-top: -.525rem; color: rgba(243, 233, 216, .7); pointer-events: none; }
.tp .tp-q {
	display: block; width: 100%; min-height: 2.75rem; margin: 0; padding: .55rem .9rem .55rem 2.5rem;
	border: 0; border-radius: var(--radius); background: rgba(20, 14, 6, .5); box-shadow: inset 0 0 0 1px rgba(243, 233, 216, .34);
	color: var(--cream); font: 400 1rem/1.3 var(--sans);   /* 16px: phones don't zoom in on it */
	-webkit-appearance: none; appearance: none;
}
.tp .tp-q::placeholder { color: rgba(243, 233, 216, .6); }
.tp .fbar-search::before {   /* Stage 5: the slash on the search box too */
	content: ""; position: absolute; left: -.55rem; top: .45rem; bottom: .45rem; width: 3px; border-radius: 2px; background: var(--campfire); transform: skewX(-14deg);
}
.tp .tp-q:focus { outline: none; box-shadow: inset 0 0 0 1px var(--campfire), 0 0 0 2px rgba(var(--campfire-rgb), .35); }
.tp .tp-summary { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.tp .tp-count { color: var(--cream-mist); font-size: .82rem; }
.tp .filter-bar:not(.is-shrunk) .tp-summary { display: none; }
.tp .filter-bar.is-shrunk .tp-count { display: none; }
.tp .fbar-toggle {
	display: inline-flex; flex: none; align-items: center; gap: .3rem; min-height: 2.4rem; padding: .3rem .6rem .3rem .85rem;
	border: 0; border-radius: 999px; background: rgba(243, 233, 216, .06); box-shadow: inset 0 0 0 1px rgba(243, 233, 216, .34);
	color: var(--cream); font: 600 .68rem var(--sans); letter-spacing: .1em; text-transform: uppercase; cursor: pointer;
}
.tp .fbar-toggle:hover { box-shadow: inset 0 0 0 1px var(--campfire); }
.tp .fbar-toggle .icon { transform: rotate(180deg); transition: transform .35s ease; }
.tp .filter-bar.is-shrunk .fbar-toggle .icon { transform: none; }
.tp .fbar-groups { display: grid; grid-template-rows: 1fr; transition: grid-template-rows .35s cubic-bezier(.4, 0, .2, 1); }
.tp .filter-bar.is-shrunk .fbar-groups { grid-template-rows: 0fr; }
/* reaches out to the bar's edges so the chips' focus rings aren't cut off at the sides */
.tp .fbar-inner { min-height: 0; overflow: hidden; margin-inline: calc(-1.1rem - 3px) -1.1rem; padding-inline: calc(1.1rem + 3px) 1.1rem; }
.tp .filter-bar.is-shrunk .fbar-inner { visibility: hidden; transition: visibility 0s linear .35s; }
.tp .fgroup { margin-top: calc(.6rem - 5px); }
.tp .flabel { display: block; margin-bottom: calc(.45rem - 5px); font: 600 .7rem var(--sans); letter-spacing: .08em; text-transform: uppercase; color: rgba(243, 233, 216, .6); }
.tp .fchips { display: flex; flex-wrap: wrap; gap: .5rem; padding-block: 5px; }
.tp .fchip {
	display: inline-flex; align-items: center; flex: none; min-height: 2.25rem; padding: .4rem .9rem;
	border: 1px solid rgba(243, 233, 216, .32); border-radius: 999px; background: transparent;
	color: rgba(243, 233, 216, .82); font: 600 .8rem/1.2 var(--sans); white-space: nowrap; cursor: pointer;
	transition: background-color .2s, color .2s, border-color .2s, box-shadow .2s;
}
.tp .fchip:hover { border-color: var(--campfire); color: var(--cream); }
.tp .fchip[aria-pressed="true"] {
	background: var(--cream); border-color: var(--cream); color: var(--ink);
	box-shadow: 0 0 0 3px rgba(var(--campfire-rgb), 0.35), 0 4px 16px -3px rgba(var(--campfire-rgb), 0.6);
}
html.reduce-motion .tp .fbar-groups, html.reduce-motion .tp .fbar-toggle .icon, html.reduce-motion .tp .filter-bar,
html.reduce-motion .tp .filter-bar .fbar-inner, html.reduce-motion .tp .filter-bar .fbar-mode, html.reduce-motion .tp .fchip { transition: none; }

/* ---------- Directory: the rolling carousels (Stage 5; styles.css .rail) ---------- */
.tp .tp-carousel { padding: .5rem 0 1.5rem; }
.tp .tp-carousel-top { padding: 0 0 2rem; }

/* ---------- Directory: one section per body area, cards A-Z ---------- */
.tp .tp-list { padding: 0 0 1rem; }
.tp .area-heading { display: flex; align-items: center; gap: .8rem; margin: 2.8rem 0 1.2rem; }
/* Stage 5, so scrolling the directory isn't plain: each area opens with the slash and a dashed rule out to the edge */
.tp .area-heading::before { content: ""; flex: none; width: 3px; height: 1.3em; border-radius: 2px; background: var(--campfire); transform: skewX(-14deg); }
.tp .area-heading::after { content: ""; flex: 1; min-width: 2rem; border-top: 1px dashed rgba(243, 233, 216, .3); }
.tp .tp-area:first-child .area-heading { margin-top: .5rem; }
.tp .tp-also { margin-top: 1.4rem; }
.tp .also-related { display: flex; align-items: center; gap: .5rem; margin: 0 0 .9rem; font: 600 .72rem var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--cream-mist); }
.tp .also-related .pt { width: .45rem; height: .45rem; border-radius: 50%; border: 1.5px solid var(--campfire); }
.tp .also-related .ln { width: 1.3rem; height: 1px; background: var(--campfire); }
.tp .tp-none { margin: 0 0 2rem; font-style: italic; color: var(--cream-mist); }

/* cards: styles.css draws them at rest (.condition-card). The lift, shadow and ochre underline are kw-ui.js's: once
   started they always finish (0.3 s up, 0.5 s down), on mouse, touch and keyboard. The old CSS hover lift (mouse
   only, could stop halfway) is switched off here; the warmer fill and ochre border on hover stay. */
.tp .tp-card { isolation: isolate; transform-origin: 50% 50%; transition: border-color .18s ease, background .18s ease; }
.tp .tp-card:hover { transform: none; box-shadow: none; }
.tp .card-shadow { position: absolute; inset: 0; z-index: -1; border-radius: inherit; opacity: 0; pointer-events: none; box-shadow: 0 22px 36px -18px rgba(20, 14, 6, .65), 0 8px 16px -10px rgba(20, 14, 6, .45); }
.tp .card-line { position: absolute; left: 1px; right: 1px; bottom: 0; height: 2px; border-radius: 1px; background: var(--ochre); transform: scaleX(0); transform-origin: left center; }

/* ---------- Article: the book with tabs ---------- */
/* The old pages' parchment panel, with tabs on top in the same parchment. Tabs stay on top while they fit; when they
   run out of room (phones; the longest articles on desktop) the ones that don't fit move to a second row on the
   panel's bottom edge (kw-ui.js sorts them and adds .tabs-fitted; without the script the row scrolls sideways). The
   open tab carries the ochre line the old jump links had. */
.tp .tp-top { padding: 3rem 0 1.25rem; }
.tp .book { display: flex; flex-direction: column; width: 100%; }
.tp .book-title { max-width: 26ch; margin-bottom: 1.4rem; }
.tp .book-title .eyebrow { display: block; margin: 0 0 .7rem; color: var(--ochre); font-family: var(--sans); }
.tp .book-tabs { position: relative; z-index: 1; display: flex; gap: .25rem; overflow-x: auto; scrollbar-width: none; }
.tp .book-tabs::-webkit-scrollbar { display: none; }
.tp .book-tabs [role="tab"] {
	position: relative; flex: none; margin: 0 0 -1px; padding: .72rem 1.05rem .7rem;
	border: 1px solid rgba(216, 207, 184, 0.7); border-bottom: 0; border-radius: var(--radius) var(--radius) 0 0;
	background: rgba(247, 242, 228, 0.34); color: var(--ink-mist);
	font: 600 .74rem/1.2 var(--sans); letter-spacing: .08em; text-transform: uppercase; cursor: pointer;
	transition: color .2s, background-color .2s;
}
.tp .book-tabs [role="tab"]:hover { color: var(--ink); background-color: rgba(247, 242, 228, 0.5); }
.tp .book-tabs [role="tab"][aria-selected="true"] {
	background: rgba(247, 242, 228, 0.62); color: var(--ink); box-shadow: inset 0 2px 0 var(--ochre);
}
.tp .book-pages {
	position: relative; overflow: hidden; contain: inline-size;
	padding: 1.7rem 1.5rem 1.9rem; border-radius: 0 var(--radius) var(--radius) var(--radius);
	background: rgba(247, 242, 228, 0.62); border: 1px solid rgba(216, 207, 184, 0.7);
	box-shadow: inset 3px 0 0 var(--ochre);
}
.tp .book.tabs-fitted .book-tabs { overflow: visible; }   /* nothing to scroll, so focus rings show in full */
.tp .book-tabs.is-below { flex-wrap: wrap; }
.tp .book-tabs.is-below [role="tab"] { margin: -1px 0 0; border: 1px solid rgba(216, 207, 184, 0.7); border-top: 0; border-radius: 0 0 var(--radius) var(--radius); }
.tp .book-tabs.is-below [role="tab"][aria-selected="true"] { box-shadow: inset 0 -2px 0 var(--ochre); }
/* overlapping: when a row still doesn't fit, its tabs overlap by less than their side padding (--lap, set by
   kw-ui.js), so no name is covered. Later tabs sit over earlier ones; the open tab comes to the front. */
.tp .book-tabs.is-lapped { flex-wrap: nowrap; gap: 0; }
.tp .book-tabs.is-lapped [role="tab"] { background-color: #EDE3CC; }
.tp .book-tabs.is-lapped [role="tab"][aria-selected="true"] { background-color: #F3EBD9; }
.tp .book-tabs.is-lapped [role="tab"] + [role="tab"] { margin-left: calc(-1 * var(--lap, 0px)); }
.tp .book-tabs [role="tab"][aria-selected="true"] { z-index: 2; }
.tp .book-tabs [role="tab"]:focus-visible { z-index: 3; }
.tp .book.has-below .book-pages { border-radius: 0 var(--radius) var(--radius) 0; }

.tp .page > :last-child { margin-bottom: 0; }
.tp .page:focus-visible { outline: 2px solid var(--ochre); outline-offset: 6px; }
.tp .page .section-head { position: relative; max-width: none; margin-bottom: 1.1rem; padding-left: 1.1rem; }
/* Stage 5: the directory's slash on the article pages too, at each panel's heading and down the panel's edge */
.tp .page .section-head::before { content: ""; position: absolute; left: .1rem; top: .15rem; height: min(2.8rem, calc(100% - .3rem)); width: 3px; border-radius: 2px; background: var(--ochre); transform: skewX(-14deg); }
.tp .page .section-head .eyebrow { color: var(--ochre); }
.tp .page .leaders-label { color: var(--ochre); margin-top: 1.4rem; }
.tp .page .redflag:last-child { margin-bottom: 0; }
.tp .expander > p { margin-bottom: 1rem; }
.tp .expander > p:last-of-type { margin-bottom: .2rem; }
/* the shorter disclaimer, small, at the end of the first tab */
.tp .tp-disclaimer { margin: 1.4rem 0 0; font-size: .78rem; line-height: 1.5; color: var(--ink-mist); }

/* anatomy drawings (Oliver, 6 Oct): the premade sepia line studies, on the panel's paper. Beside the text on wider
   screens, above it on phones; the panel holds its floats so nothing pokes out below it */
.tp .page:not([hidden]) { display: flow-root; }
.tp .tp-figure { float: right; clear: right; width: min(42%, 17rem); margin: .2rem 0 1rem 1.6rem; }
.tp .tp-figure.is-tall { width: min(32%, 12.5rem); }
.tp .tp-figure img { display: block; width: 100%; height: auto; }
.tp .tp-figure figcaption { margin-top: .55rem; padding-top: .5rem; border-top: 1px solid var(--line-day); font-size: .8rem; line-height: 1.45; color: var(--ink-mist); }
@media (max-width: 600px) {
	.tp .tp-figure, .tp .tp-figure.is-tall { float: none; width: auto; max-width: 17rem; margin: 0 auto 1.3rem; }
	.tp .tp-figure.is-tall { max-width: 11rem; }
	.tp .tp-figs { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; align-items: start; margin-bottom: 1.3rem; }
	.tp .tp-figs .tp-figure { max-width: none; margin: 0; }
}

/* ---------- Advice articles (PLAN §1, Oliver approved 13 Oct 2026): sections, lists and references in a tab ---------- */
/* A tab written with sub-headings: each section opens with a small serif heading on a thin rule; its first paragraph
   shows and the rest waits behind its own Read more (site.js). Only the advice articles use these classes. */
.tp .tp-sec + .tp-sec { margin-top: 1.6rem; padding-top: 1.1rem; border-top: 1px solid var(--line-day); }
.tp .tp-sub { margin: 0 0 .6rem; font-family: var(--serif); font-size: clamp(1.02rem, 2.2vw, 1.18rem); font-weight: 600; line-height: 1.3; color: var(--ink); }
.tp .tp-minor { margin: 1.1rem 0 .45rem; font-family: var(--sans); font-size: .8rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ochre); }
.tp .tp-bullets, .tp .tp-ol { margin: .2rem 0 1rem; padding-left: 1.25rem; }
.tp .tp-bullets li, .tp .tp-ol li { margin: 0 0 .5rem; line-height: 1.55; }
.tp .tp-bullets li::marker { color: var(--ochre); }
.tp .tp-ol li::marker { color: var(--ochre); font-weight: 600; }
/* references: smaller, numbered, long web addresses break anywhere so a phone never scrolls sideways */
.tp .tp-refs { margin: 0; padding-left: 1.6rem; font-size: .86rem; line-height: 1.5; color: var(--ink-mist); }
.tp .tp-refs li { margin: 0 0 .65rem; overflow-wrap: anywhere; }
.tp .tp-refs a { color: inherit; text-decoration-color: var(--ochre); text-underline-offset: 2px; }
.tp .redflag .tp-bullets { margin: 0 0 .6rem; }
/* the directory's "Show all" under a folded area */
.tp .tp-fold { display: block; margin: 1.1rem auto 0; }
.tp .tp-fold[hidden] { display: none; }

/* ---------- Related carousel ---------- */
/* A row of the site's cards that scrolls sideways: swipe, or the round arrows (kw-ui.js; they go when everything fits).
   It runs to the screen's edges on phones and fades at the ends; padding leaves room for the card lift. */
.tp .tp-rails { padding: 1.5rem 0 0; }
.tp .tp-rail-head { margin-bottom: .2rem; --bar: 2.9rem; }
/* Stage 5 (Oliver): "Related" in its own box; "Related Conditions" in a second box that runs out to the arrows, which
   are exactly as tall as it */
.tp .tp-rail-tag { display: inline-block; margin: 0 0 .45rem; padding: .38rem .7rem; border: 1px solid rgba(243, 233, 216, .28); border-radius: var(--radius); background: rgba(55, 38, 15, .72); font: 600 .66rem/1 var(--sans); letter-spacing: .13em; text-transform: uppercase; color: var(--campfire); }
.tp .tp-rail-bar { display: flex; align-items: stretch; gap: .4rem; }
.tp .tp-rail-h {
	flex: 1; min-width: 0; display: flex; align-items: center; height: var(--bar); margin: 0; padding: 0 1rem;
	border: 1px solid rgba(243, 233, 216, .28); border-radius: var(--radius); background: rgba(55, 38, 15, .72); box-shadow: inset 3px 0 0 var(--campfire);
	color: var(--cream); font-size: clamp(1.1rem, 2.6vw, 1.4rem); line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tp .tp-rail-arrows { display: flex; flex: none; gap: .4rem; }
.tp .tp-rail.is-static .tp-rail-arrows { display: none; }
.tp .tp-rail-arrow {
	display: inline-grid; place-items: center; width: var(--bar); height: var(--bar); padding: 0; border: 0; border-radius: var(--radius);
	background: rgba(55, 38, 15, .72); color: var(--cream); cursor: pointer; box-shadow: inset 0 0 0 1px rgba(243, 233, 216, .28);
	transition: box-shadow .2s ease, opacity .2s ease;
}
.tp .tp-rail-arrow:hover { box-shadow: inset 0 0 0 1px var(--campfire); color: var(--campfire); }
.tp .tp-rail-arrow:disabled { opacity: .35; cursor: default; box-shadow: inset 0 0 0 1px rgba(243, 233, 216, .28); color: var(--cream); }
.tp .tp-rail-arrow.is-prev .icon { transform: rotate(90deg); }
.tp .tp-rail-arrow.is-next .icon { transform: rotate(-90deg); }
.tp .tp-rail-track {
	display: flex; gap: .9rem; margin: 0 -1rem; padding: 1rem 1rem 1.4rem; list-style: none;
	overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: 1rem; scrollbar-width: none;
	-webkit-mask-image: linear-gradient(to right, transparent 0, #000 1rem, #000 calc(100% - 1rem), transparent);
	mask-image: linear-gradient(to right, transparent 0, #000 1rem, #000 calc(100% - 1rem), transparent);
}
.tp .tp-rail-track::-webkit-scrollbar { display: none; }
.tp .tp-rail-track > li { display: flex; flex: 0 0 clamp(14rem, 72vw, 17rem); margin: 0; scroll-snap-align: start; }
.tp .tp-rail-track .condition-card { width: 100%; }
.tp .tp-rail-more { margin: 0; font: 600 .72rem/1.4 var(--sans); letter-spacing: .1em; text-transform: uppercase; }
.tp .tp-rail-more a { display: inline-flex; align-items: center; gap: .35rem; padding: .42rem .75rem; border-radius: var(--radius); background: rgba(55, 38, 15, .72); border: 1px solid rgba(243, 233, 216, .28); color: var(--cream); text-decoration: none; }
.tp .tp-rail-more a:hover { color: var(--campfire); }
.tp .tp-rail-more .icon { width: .9rem; height: .9rem; transform: rotate(-90deg); }
html.reduce-motion .tp .tp-rail-track { scroll-behavior: auto; }

/* ---------- The booking band ---------- */
/* TIW's band, behaviour only: no box. The site's own clip runs edge to edge on phones, faded in at the top and out at
   the bottom so it melts into the gradient; on wider screens a centred band, its sides faded too. kw-ui.js draws it
   into the canvas with the fades painted in. The heading, a line on where, and two buttons sit over it. */
.tp .tp-book { position: relative; overflow: hidden; padding: clamp(1.5rem, 4vw, 2.5rem) 0 clamp(2rem, 5vw, 3.5rem); text-align: center; }   /* clips the text's shade: the hub's gradient can't (its sticky bar needs overflow visible) */
.tp .tp-book-band { position: relative; isolation: isolate; display: grid; place-items: center; min-height: clamp(18rem, 80vw, 23rem); margin: 0 auto; }
.tp .tp-book-media { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.tp .tp-book-video { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .01; }   /* not 0: some phones stop decoding an invisible video */
.tp .tp-book-canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.tp .tp-book-text { position: relative; z-index: 1; max-width: 30rem; padding: 1.5rem 1.25rem; }
.tp .tp-book-text::before {   /* a soft shade behind the words, so they read over the clip */
	content: ""; position: absolute; inset: -1rem -2rem; z-index: -1; pointer-events: none;
	background: radial-gradient(closest-side, rgba(36, 31, 26, .55), rgba(36, 31, 26, 0));
}
.tp .tp-book h2 { margin: 0; color: var(--cream); font-size: clamp(1.5rem, 3.6vw, 2rem); text-shadow: 0 1px 3px rgba(20, 16, 12, .6), 0 0 14px rgba(20, 16, 12, .4); }
.tp .tp-book-note { margin: .7rem 0 0; color: rgba(243, 233, 216, .88); font-size: .95rem; text-shadow: 0 1px 8px rgba(20, 16, 12, .5); }
.tp .tp-book .btn-row { justify-content: center; margin-top: 1.2rem; gap: .6rem; }
@media (min-width: 640px) { .tp .tp-book-band { max-width: 40rem; } }

/* ---------- Phones ---------- */
@media (max-width: 860px) {
	.tp .tp-top { padding-top: 2rem; }
	.tp .book-pages { padding: 1.3rem 1.1rem 1.5rem; }
}
@media (max-width: 860px) and (min-width: 561px) {
	.tp .condition-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 760px) {
	/* each filter group becomes one swipeable row, so the sticky bar stays short */
	.tp .fchips {
		flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
		margin-inline: calc(-1.1rem - 3px) -1.1rem; padding-inline: calc(1.1rem + 3px) 1.1rem;
		-webkit-mask-image: linear-gradient(to right, transparent 0, #000 .9rem, #000 calc(100% - 1.6rem), transparent);
		mask-image: linear-gradient(to right, transparent 0, #000 .9rem, #000 calc(100% - 1.6rem), transparent);
	}
	.tp .fchips::-webkit-scrollbar { display: none; }
	.tp .filter-bar { padding-inline: calc(.9rem + 3px) .9rem; }
}
@media (max-width: 600px) {
	/* snugger tabs, so more fit in the two rows before they overlap */
	.tp .book-tabs [role="tab"] { padding: .7rem .75rem .68rem; letter-spacing: .05em; font-size: .7rem; }
	.tp .tp-book .btn-row .btn { width: auto; }
}
@media (max-width: 440px) {
	/* Stage 6 (Oliver, 3 Oct): tighter still, so the four usual tabs share one row on a typical phone (375px);
	   on the smallest phones the Stage 4 spill-over still applies */
	.tp .book-tabs { gap: .15rem; }
	.tp .book-tabs [role="tab"] { padding-inline: .5rem; letter-spacing: .03em; }
}