/*
	Treatment Plans on torontoislandwellness.ca: the directory and its articles (Stage 2b).
	Source: directory-build/assets/tiw.css. The build copies it to Tiw_website/tiw_assets/css/treatment-plans.css
	with a version tag; don't edit the copy.

	Builds on 3b's tiw-2026.css (the pages load both; this file comes first in the <head>, so every rule here
	is scoped under .tp to win over tiw-2026.css). Style reference: /style-sample.html, sections 5-7.
	Oliver's phone-test notes (planning/tiw/stage-2/FEEDBACK-2026-09-30-test-directory.md) are marked "note N".
*/

.tp [hidden] { display: none !important; }

/* ---------- Test pages only (Stage 2): the banner and the TEST marks ---------- */
.tp .tp-test-banner {
	margin: 0 0 1.4rem; padding: .7rem .9rem; border-radius: var(--radius);
	background: rgba(6, 18, 9, .46); box-shadow: inset 0 0 0 1px rgba(217, 100, 58, .55);
	font-size: .85rem; line-height: 1.5; color: var(--text-soft);
}
.tp .tp-test-banner p { margin: 0; }
.tp .tp-badge {
	display: inline-block; margin-right: .35rem; padding: .12rem .45rem; border-radius: var(--radius);
	background: var(--coral-deep); color: #fff; font: 700 .58rem/1.3 var(--head); letter-spacing: .12em; text-transform: uppercase;
	vertical-align: .1em;
}
.tp .tp-badge.is-draft { background: transparent; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .45); color: var(--text-soft); }
.tp .card .tp-badges { margin: 0 0 -.2rem; line-height: 1; }

/* ---------- Breadcrumb: very small (note 5) ---------- */
.tp .tp-crumbs { margin: 0 0 1.1rem; font: 700 .6rem/1.5 var(--head); letter-spacing: .12em; text-transform: uppercase; color: var(--text-soft); }
.tp .tp-crumbs a { display: inline-block; margin: -.5rem 0; padding: .5rem 0; color: var(--text-soft); text-decoration: none; }  /* small text, 24px+ tap area */
.tp .tp-crumbs a:hover { color: #fff; text-decoration: underline; }
.tp .tp-crumbs .sep { margin: 0 .4rem; opacity: .7; }

/* ---------- Directory: the filter bar ---------- */
/* Much more see-through than the test page's, barely rounded, no border, the coral edge down its left side
   (note 1). Shrink folds it to one line; the summary shows only then (note 2). It sticks while you scroll the
   directory; once it's sticking, the phone menu button fades out (note 3, tiw-ui.js). */
.tp .tp-directory { position: relative; }
.tp .filter-bar {
	position: sticky; top: .6rem; z-index: 30;
	margin: 0 0 1.6rem; padding: .6rem .9rem .75rem calc(.9rem + var(--edge)); border-radius: var(--radius);
	background: rgba(255, 255, 255, .045);
	-webkit-backdrop-filter: blur(12px) saturate(1.1); backdrop-filter: blur(12px) saturate(1.1);
	box-shadow: inset var(--edge) 0 0 var(--coral-deep);   /* the deeper coral, like the page's booking button (Oliver, 1 Oct) */
	transition: background-color .25s, box-shadow .25s;
}
.tp .filter-bar.is-stuck { background: rgba(14, 30, 19, .38); box-shadow: inset var(--edge) 0 0 var(--coral-deep), 0 16px 30px -18px rgba(0, 0, 0, .75); }
.tp .fbar-head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; min-height: 2.4rem; }
/* Two modes (Oliver, 1 Oct): the round button on the left switches between filters and search and shows the other
   mode's icon; the icon after it shows the mode you're in (it replaces the word "Filters"). */
.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(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .34);
	color: #fff; cursor: pointer;
}
.tp .fbar-mode:hover { box-shadow: inset 0 0 0 1px #fff; }
/* shrunk, the switch slides away to tidy the bar, and slides back in when it opens (Oliver, 1 Oct) */
.tp .fbar-mode { overflow: hidden; transition: width .3s var(--ease), margin .3s var(--ease), opacity .25s ease, transform .3s var(--ease), visibility 0s; }
.tp .filter-bar.is-shrunk .fbar-mode {
	width: 0; margin-right: -.75rem; opacity: 0; transform: translateX(-.8rem); visibility: hidden;
	transition: width .3s var(--ease), margin .3s var(--ease), opacity .2s ease, transform .3s var(--ease), visibility 0s linear .3s;
}
/* in search mode, tapping the orange search icon or the count goes to the search box (tiw-ui.js) */
.tp .filter-bar[data-mode="search"] .fbar-now { cursor: text; }
.tp .fbar-mode .icon { width: 1.15rem; height: 1.15rem; stroke-width: 1.6; }
.tp .filter-bar[data-mode="filter"] .is-filter:not(.fbar-now-icon), .tp .filter-bar[data-mode="search"] .is-search:not(.fbar-now-icon),
.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 .fbar-now { flex: 1; display: flex; align-items: center; gap: .55rem; min-width: 0; margin: 0; overflow: hidden; color: #fff; font-size: .88rem; white-space: nowrap; }
.tp .fbar-now-icon { flex: none; width: 1.05rem; height: 1.05rem; stroke-width: 1.6; color: var(--coral); }
/* the search box, in the filters' place */
.tp .fbar-search { position: relative; margin: .55rem 0 .1rem; }
.tp .fbar-search .icon { position: absolute; left: .85rem; top: 50%; width: 1.05rem; height: 1.05rem; margin-top: -.525rem; color: rgba(255, 255, 255, .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(6, 18, 9, .5); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .34);
	color: #fff; font: 400 1rem/1.3 var(--body);   /* 16px: phones don't zoom in on it */
	-webkit-appearance: none; appearance: none;
}
.tp .tp-q::placeholder { color: rgba(255, 255, 255, .6); }
.tp .tp-q:focus { outline: none; box-shadow: inset 0 0 0 1px #fff, 0 0 0 2px rgba(255, 255, 255, .25); }
.tp .tp-summary { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.tp .tp-count { color: var(--text-soft); 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(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .34);
	color: #fff; font: 700 .64rem var(--head); letter-spacing: .12em; text-transform: uppercase; cursor: pointer;
}
.tp .fbar-toggle:hover { box-shadow: inset 0 0 0 1px #fff; }
.tp .fbar-toggle .icon { width: 1rem; height: 1rem; 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 var(--ease); }
.tp .filter-bar.is-shrunk .fbar-groups { grid-template-rows: 0fr; }
/* reaches out to the bar's edges so the buttons' focus rings aren't cut off at the sides */
.tp .fbar-inner {
	min-height: 0; overflow: hidden;
	margin-inline: calc(-.9rem - var(--edge)) -.9rem; padding-inline: calc(.9rem + var(--edge)) .9rem;
}
/* folded away: hidden from the keyboard too, once the fold has finished */
.tp .filter-bar.is-shrunk .fbar-inner { visibility: hidden; transition: visibility 0s linear .35s; }
.tp .fgroup { margin-top: calc(.55rem - 5px); }
.tp .flabel { display: block; margin-bottom: calc(.4rem - 5px); font: 700 .6rem var(--head); letter-spacing: .16em; text-transform: uppercase; color: rgba(255, 255, 255, .78); }
/* 5px above and below the buttons leaves room for their focus rings (the spacing around is 5px less to match) */
.tp .fchips { display: flex; flex-wrap: wrap; gap: .4rem; padding-block: 5px; }
.tp .fchip {
	display: inline-flex; align-items: center; flex: none; min-height: 2.4rem; padding: .35rem .85rem;
	border: 1px solid rgba(255, 255, 255, .45); border-radius: 999px; background: transparent;
	color: rgba(255, 255, 255, .92); font: 700 .74rem/1.2 var(--head); letter-spacing: .03em; white-space: nowrap;
	cursor: pointer; transition: background-color .2s, color .2s, border-color .2s;
}
.tp .fchip:hover { border-color: #fff; color: #fff; }
.tp .fchip[aria-pressed="true"] { border-color: #fff; background: #fff; color: #15301c; }
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 { transition: none; }

/* ---------- Directory: the description under the title, with Read more (Oliver, 1 Oct) ---------- */
/* A faint dark box with a thin white left edge, as on an opened FAQ answer; tucked up under the title. "Read more +"
   is part of the sentence: right after the last word when it fits, otherwise just under it. Opened, it fades and
   the text slides open with the X at its bottom right (tiw-ui.js). */
.tp .tp-intro {
	position: relative; max-width: 40rem; margin: -.7rem 0 1.4rem; padding: .75rem 1rem .8rem; border-radius: var(--radius);
	background: var(--panel); box-shadow: inset 1px 0 0 var(--hair-strong);
}
.tp .tp-intro-lead { margin: 0; color: rgba(255, 255, 255, .9); }
.tp .tp-intro-more {
	display: inline-flex; align-items: center; gap: .3rem; margin: 0; padding: 0 0 0 .4rem; border: 0; background: none;
	color: #fff; font: 700 .66rem/1 var(--head); letter-spacing: .14em; 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 var(--ease); }
.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; }   /* fades without holding its line */
.tp .tp-intro-more[aria-expanded="true"] .x-icon { transform: rotate(45deg); }
.tp .tp-intro .more-inner > :first-child { margin-top: .7rem; }
.tp .tp-intro-close {
	display: flex; margin: -.2rem -.3rem -.3rem auto; padding: .3rem; border: 0; background: none; color: #fff; 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; }

/* ---------- Directory: one section per body area, cards A-Z ---------- */
.tp .tp-area { margin: 0 0 2.2rem; }
.tp .tp-area-h { margin: 0 0 1rem; font: inherit; text-transform: none; }
.tp .tp-area-h .divider-label {   /* closer to the ripple, bigger, a little in from the line's start, with a soft shadow (Oliver, 1 Oct) */
	margin-bottom: 0; padding-left: .55rem; font-size: 1.1rem; color: #fff;
	text-shadow: 0 1px 2px rgba(0, 0, 0, .6), 0 0 10px rgba(0, 0, 0, .4);
}
.tp .tp-also { margin-top: 1.3rem; }
.tp .also-related { display: flex; align-items: center; margin: 0 0 .8rem; font: 700 .68rem var(--head); letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .85); }
.tp .glint-mark { display: inline-block; flex: none; width: .85rem; height: .85rem; margin-right: .5rem; fill: var(--coral); }
.tp .tp-none { margin: 0 0 2rem; font-style: italic; }

/* cards: tiw-2026.css draws them at rest. The lift, shadow and coral underline are tiw-ui.js's, as on the sample page:
   once started they always finish (0.3 s up, 0.5 s down), on mouse, touch and keyboard. tiw-2026.css's own hover
   (which can stop halfway, and is mouse-only) is switched off here. */
.tp .card { isolation: isolate; transform-origin: 50% 50%; transition: none; }
.tp .card:hover { transform: none; background: rgba(255, 255, 255, .035); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); }
.tp .card-title::after { content: none; }
.tp .card-shadow { position: absolute; inset: 0; z-index: -1; border-radius: inherit; opacity: 0; pointer-events: none; box-shadow: 0 24px 40px -20px rgba(0, 0, 0, .8), 0 8px 16px -10px rgba(0, 0, 0, .55); }
.tp .card-line { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; border-radius: 1px; background: var(--coral); transform: scaleX(0); transform-origin: left center; }
.tp .cards { grid-template-columns: repeat(auto-fill, minmax(min(100%, 16.5rem), 1fr)); gap: 1.1rem; }
.tp .tags { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: auto; padding-top: .3rem; }
.tp .tag {
	display: inline-flex; padding: .22rem .6rem; border: 1px solid rgba(255, 255, 255, .22); border-radius: 999px;
	background: rgba(255, 255, 255, .08); color: rgba(255, 255, 255, .84);
	font: 700 .6rem/1.35 var(--head); letter-spacing: .07em; text-transform: uppercase;
}
.tp .cards.compact { grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr)); gap: .85rem; }
.tp .cards.compact .card { padding: .95rem 1rem 1.05rem; }
.tp .cards.compact .card-title { font-size: .86rem; }
.tp .cards.compact .card p { font-size: .88rem; }

/* ---------- Article: the book with tabs and the coral edge ---------- */
/* The full width of the page's column (Oliver, 1 Oct; was as wide as its row of tabs, Stage 1 round 2). */
.tp .book { display: flex; flex-direction: column; width: 100%; }
.tp .book-title { max-width: 34ch; margin-bottom: 1.3rem; font-size: clamp(1.55rem, 4.2vw, 2.3rem); }
.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 1rem .7rem 1.1rem; border: 0; border-radius: var(--radius) var(--radius) 0 0;
	background: rgba(255, 255, 255, .045);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), inset 1px 0 0 rgba(255, 255, 255, .07), inset -1px 0 0 rgba(255, 255, 255, .07);
	color: rgba(255, 255, 255, .74); font: 700 .68rem/1.2 var(--head); letter-spacing: .12em; text-transform: uppercase; cursor: pointer;
}
.tp .book-tabs [role="tab"]:hover { color: #fff; }
.tp .book-tabs [role="tab"][aria-selected="true"] {
	background: rgba(9, 22, 13, .6); color: #fff;
	box-shadow: inset var(--edge) 0 0 var(--coral), inset 0 1px 0 rgba(255, 255, 255, .24), inset -1px 0 0 rgba(255, 255, 255, .16);
}
.tp .book-pages {
	position: relative; overflow: hidden; contain: inline-size;
	padding: clamp(1.1rem, 3vw, 1.8rem) clamp(1.1rem, 3vw, 1.8rem) clamp(1.1rem, 3vw, 1.8rem) calc(clamp(1.1rem, 3vw, 1.8rem) + var(--edge));
	border-radius: 0 var(--radius) var(--radius) var(--radius);
	background: rgba(9, 22, 13, .6);
	box-shadow: inset var(--edge) 0 0 var(--coral), inset 0 0 0 1px rgba(255, 255, 255, .16);
}
/* 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 box's bottom edge, flipped (note 4; Oliver, 30 Sep: spill over, not the whole
   row). tiw-ui.js does the sorting and adds .tabs-fitted; without the script the row just scrolls sideways. */
.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-radius: 0 0 var(--radius) var(--radius);
	box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .1), inset 1px 0 0 rgba(255, 255, 255, .07), inset -1px 0 0 rgba(255, 255, 255, .07);
}
.tp .book-tabs.is-below [role="tab"][aria-selected="true"] {
	box-shadow: inset var(--edge) 0 0 var(--coral), inset 0 -1px 0 rgba(255, 255, 255, .24), inset -1px 0 0 rgba(255, 255, 255, .16);
}
/* Overlapping (Oliver, 1 Oct): when a row still doesn't fit, its tabs overlap by less than their side padding (set by
   tiw-ui.js as --lap), 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: rgba(18, 36, 24, .88); }
.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 { max-width: none; }   /* the text fills the book too (Oliver, 1 Oct) */
.tp .page > :first-child { margin-top: 0; }
.tp .page > :last-child { margin-bottom: 0; }
.tp .page:focus-visible { outline: 2px solid rgba(255, 255, 255, .7); outline-offset: 6px; }
.tp .page-h { margin: 0 0 1rem; font-size: clamp(1.1rem, 2.6vw, 1.35rem); }
.tp .typical-course { margin: 0 0 1rem; padding: .85rem 1rem; border-radius: var(--radius); background: rgba(6, 18, 9, .46); }
.tp .typical-course p { margin: 0; }
.tp .expander > p { margin-bottom: 1rem; }
.tp .expander > p:last-of-type { margin-bottom: .2rem; }

/* "General information, not a diagnosis": small, at the end of the What it is tab (note 7) */
.tp .tp-disclaimer { margin: 1.3rem 0 0; font-size: .72rem; line-height: 1.5; color: var(--text-soft); }

/* ---------- Red flags: brick red tint, icon and heading ---------- */
.tp .redflag {
	margin: 0 0 1rem; padding: 1rem 1.15rem 1.1rem; border-radius: var(--radius);
	background: rgba(215, 71, 69, .15);
	background: color-mix(in srgb, var(--brick) 17%, rgba(8, 18, 11, .55));
}
.tp .redflag:last-child { margin-bottom: 0; }
.tp .rf-head { display: flex; align-items: center; gap: .6rem; margin-bottom: .45rem; }
.tp .rf-head h3 { margin: 0; font: 700 .95rem/1.3 var(--head); letter-spacing: .02em; text-transform: uppercase; color: #fff; }
.tp .rf-icon { flex: none; width: 1.65rem; height: 1.65rem; color: var(--brick); stroke-width: 1.5; }
.tp .redflag.is-emergency .rf-icon { stroke-width: 2.2; }
.tp .redflag p { margin: 0 0 .6rem; font-size: .96rem; line-height: 1.55; color: rgba(255, 255, 255, .9); }
.tp .redflag p:last-child { margin-bottom: 0; }

/* ---------- Booking at the end: less space before the footer (note 6) ---------- */
/* The booking band (Oliver, 1 Oct): no box. The massage clip runs edge to edge on phones, faded in at the top and out
   at the bottom (small fades) so it blends into the background; on wider screens it's a centred band no wider than
   the portrait clip looks good at, its sides faded too. tiw-ui.js draws it into the canvas with the fades painted in
   (a masked, playing video flickers on phones). The heading and two smaller buttons sit over it. */
.tp .tp-book { position: relative; padding: clamp(1rem, 3vw, 2rem) 0 0; text-align: center; }
.tp .tp-book-band { position: relative; isolation: isolate; display: grid; place-items: center; min-height: clamp(17rem, 78vw, 22rem); 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; padding: 1.5rem 1rem; }
.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(6, 14, 8, .5), rgba(6, 14, 8, 0));
}
.tp .tp-book h2 { margin: 0; font-size: clamp(1.3rem, 3.4vw, 1.7rem); text-shadow: 0 1px 3px rgba(0, 0, 0, .6), 0 0 14px rgba(0, 0, 0, .4); }
.tp .tp-book .btn-row { justify-content: center; margin-top: 1rem; gap: .5rem; }
.tp .tp-book .btn { width: auto; min-height: 2.4rem; padding: .5rem .95rem; font-size: .66rem; }   /* smaller, and not full width on phones */
@media (min-width: 640px) { .tp .tp-book-band { max-width: 40rem; } }

/* ---------- Carousels under an article (Stage 3a; Oliver, 1 Oct: the rehab page's conditions and approaches) ----------
   A row of compact cards that scrolls sideways: swipe, or the round arrows (tiw-ui.js; the arrows go when everything
   fits). The row runs to the screen's edges on phones and fades at the ends; padding leaves room for the card lift. */
.tp .tp-rails { padding-top: 0; }
.tp .tp-rail + .tp-rail { margin-top: clamp(2rem, 5vw, 3rem); }
.tp .tp-rail-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: .2rem; }
.tp .tp-rail-h { margin: 0; font-size: clamp(1.15rem, 3vw, 1.45rem); }
.tp .tp-rail-arrows { display: flex; flex: none; gap: .45rem; }
.tp .tp-rail.is-static .tp-rail-arrows { display: none; }
.tp .tp-rail-arrow {
	display: inline-grid; place-items: center; width: 2.6rem; height: 2.6rem; padding: 0; border: 0; border-radius: 999px;
	background: rgba(255, 255, 255, .06); color: #fff; cursor: pointer; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .34);
	transition: box-shadow .2s var(--ease), opacity .2s var(--ease);
}
.tp .tp-rail-arrow:hover { box-shadow: inset 0 0 0 1px #fff; }
.tp .tp-rail-arrow:disabled { opacity: .3; cursor: default; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .34); }
.tp .tp-rail-arrow .icon { width: 1.05rem; height: 1.05rem; }
.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: .85rem; 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(13rem, 72vw, 16rem); margin: 0; scroll-snap-align: start; }
.tp .tp-rail-track .card { width: 100%; padding: .95rem 1rem 1.05rem; }
.tp .tp-rail-track .card-title { font-size: .86rem; }
.tp .tp-rail-track .card p { font-size: .88rem; }
.tp .tp-rail-more { margin: 0; font: 700 .66rem/1.4 var(--head); letter-spacing: .14em; text-transform: uppercase; }
.tp .tp-rail-more a { display: inline-flex; align-items: center; gap: .35rem; color: #fff; text-decoration: none; }
.tp .tp-rail-more a:hover { color: var(--coral); }
.tp .tp-rail-more .icon { width: .9rem; height: .9rem; transform: rotate(-90deg); }
html.reduce-motion .tp .tp-rail-track { scroll-behavior: auto; }

/* ~, not +: the page's script sits between <main> and the footer */
.tp ~ .nf { margin-top: 0; padding-top: 4.5rem; }
@media (min-width: 761px) { .tp ~ .nf { padding-top: 6.5rem; } }   /* as tiw-2026.css: the row in the footer's solid part */

@media (max-width: 600px) {
	/* phones: slightly snugger tabs, so more fit in the two rows before they overlap */
	.tp .book-tabs [role="tab"] { padding: .7rem .75rem .68rem .8rem; letter-spacing: .09em; }
}
@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(-.9rem - var(--edge)) -.9rem; padding-inline: calc(.9rem + var(--edge)) .9rem;
		-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; }
}