/*
Theme Name: Astra Child Tide
Template: astra
Description: Deep-sea child theme for Bonus World UK
Author: Bonus World UK
Version: 1.2.0
Text Domain: astra-child-tide
*/

/* ==================================================================
   Astra Child Tide, stylesheet for bonus-world.uk
   Deep-sea dial: very dark blue-green ground, aqua accent, seafoam
   for secondary emphasis, light ink, 4px radii, one content measure.
   Each block names the spec rule it enforces. House rules for this
   file: British English comments, no em dashes, no exclamation marks
   in comments, flat fills only, motion limited to hover and focus.
   Markup contract (BUILD_BRIEF_FIXES, the parallel functions.php
   rewrite and revision 1.1.0): the header prints .tide-header >
   .tide-wrap.tide-header__inner holding .tide-header__brand with
   .tide-logo and .tide-tagline, plus .tide-nav > .tide-nav__list
   whose hub items may carry .tide-nav__sub panels of child pages;
   the footer prints .tide-footer > .tide-wrap.tide-footer__inner
   holding .tide-footer__colophon and .tide-footer__links. Every
   selector in the chrome sections matches those names exactly.
   Revision 1.2.0: the heading pair moved to pure white and bright
   aqua with a hard guarantee block at the foot of the file, after
   the operator reported the 1.1.0 pair still read too close to the
   body ink; the navigation is now single source on the page tree.
   ================================================================== */

/* ------------------------------------------------------------------
   1. Design tokens. Text lives only in ink, muted and foam; the two
   heading tokens lift titles out of the body text (revision 1.1.0,
   operator report: headings were hard to see). Revision 1.2.0: the
   pair is re-tuned at the foot of the file to pure white and bright
   aqua, because the 1.1.0 values still sat too close to the body ink
   on the dark ground. The accent paints rules, links, buttons and
   the scale fill; every accent fill carries the dark on-accent text
   (contrast pair held).
   ------------------------------------------------------------------ */
:root {
	--tide-bg: #06232a;
	--tide-surface: #0b323b;
	--tide-surface-2: #0f3a43;
	--tide-ink: #d9edf0;
	--tide-muted: #8fb3ba;
	--tide-accent: #39d5c0;
	--tide-foam: #9fe8dd;
	--tide-head: #ffffff;
	--tide-head-2: #4fe3cd;
	--tide-border: #15444e;
	--tide-track: #123034;
	--tide-radius: 4px;
	--tide-measure: 1180px;
	--tide-focus: #39d5c0;
	--tide-on-accent: #06232a;
	--tide-font-headings: "Trebuchet MS", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
	--tide-font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* ------------------------------------------------------------------
   2. Base ground. All body text sits on the dark ground in ink.
   The html body prefix beats the dynamic CSS Astra prints later in
   the head, without reaching for !important.
   ------------------------------------------------------------------ */
*,
*::before,
*::after { box-sizing: border-box; }

html body {
	background-color: var(--tide-bg);
	color: var(--tide-ink);
	font-family: var(--tide-font-body);
	font-size: 1rem;
	line-height: 1.6;
}

/* The child theme adds tide-deepsea on body_class; the stylesheet
   carries the class as well, so the theme and pages contract holds
   on both sides (audit punch item 10). */
body.tide-deepsea {
	background-color: var(--tide-bg);
	color: var(--tide-ink);
}

::selection {
	background: var(--tide-accent);
	color: var(--tide-on-accent);
}

:focus-visible {
	outline: 2px solid var(--tide-focus);
	outline-offset: 2px;
}

:focus:not(:focus-visible) { outline: none; }

img,
svg,
video { max-width: 100%; height: auto; }

/* Long tokens must never push the document sideways at 390. */
.entry-content p,
.entry-content li,
.entry-content td,
.entry-content dd { overflow-wrap: break-word; }

/* ------------------------------------------------------------------
   3. Typography. The headings stack is visibly different from the
   network's Georgia serif; body is system-ui based; numerals that
   carry figures are tabular so columns and scores line up.
   Revision 1.2.0: selectors are scoped to body.tide-deepsea so they
   out-rank anything Astra's dynamic CSS prints for plain h1 to h6;
   h1 and h2 read pure white at larger clamps, h3 to h6 read bright
   aqua, both a loud step away from the body ink; a hard guarantee
   block at the foot of the file holds the two colours regardless of
   anything Astra prints.
   ------------------------------------------------------------------ */
body.tide-deepsea h1,
body.tide-deepsea h2,
body.tide-deepsea h3,
body.tide-deepsea h4,
body.tide-deepsea h5,
body.tide-deepsea h6 {
	font-family: var(--tide-font-headings);
	font-weight: 700;
	letter-spacing: -0.01em;
	line-height: 1.25;
	color: var(--tide-head);
	margin: 0 0 0.6rem;
}

body.tide-deepsea h1 { font-size: clamp(2rem, 1.5rem + 2vw, 2.9rem); }
body.tide-deepsea h2 { font-size: clamp(1.55rem, 1.3rem + 1.1vw, 2.1rem); }
body.tide-deepsea h3 { font-size: 1.35rem; color: var(--tide-head-2); }
body.tide-deepsea h4,
body.tide-deepsea h5,
body.tide-deepsea h6 { font-size: 1.15rem; color: var(--tide-head-2); }

.entry-content p {
	line-height: 1.65;
	margin: 0 0 1rem;
}

.entry-content a {
	color: var(--tide-accent);
	text-decoration: none;
}

.entry-content a:hover,
.entry-content a:focus-visible {
	color: var(--tide-accent);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Body sections: every H2 carries a short flat aqua rule above. */
.entry-content h2 {
	position: relative;
	margin-top: 2.6rem;
}

.entry-content h2::before {
	content: "";
	display: block;
	width: 2.75rem;
	height: 2px;
	border-radius: 2px;
	background: var(--tide-accent); /* flat fill, never a gradient */
	margin-bottom: 0.7rem;
}

/* H3 sections get their own air too, so they read as breaks. */
.entry-content h3 {
	margin-top: 1.9rem;
}

/* The board and the hero own their headings; the rule stays out. */
.tbd-ledger h2::before,
.tbd-ledger h3::before,
.tp-hero h2::before { content: none; }

.entry-content [id] { scroll-margin-top: 1.5rem; }

.entry-content ul,
.entry-content ol {
	margin: 0 0 1rem;
	padding-left: 1.4rem;
}

.entry-content li { margin: 0 0 0.35rem; }

.entry-content hr {
	border: 0;
	border-top: 1px solid var(--tide-border);
	margin: 2rem 0;
}

.entry-content blockquote {
	border-left: 3px solid var(--tide-accent);
	margin: 1.5rem 0;
	padding: 0.2rem 0 0.2rem 1.1rem;
	color: var(--tide-muted);
}

/* ------------------------------------------------------------------
   4. One width for everything (binding spec rule). A single measure;
   every flow block, paragraph, table, figure, calculator, ledger row,
   contents bar, FAQ, care panel and onward block spans it; no rule
   narrows prose. The 24px gutter is horizontal; vertical rhythm
   comes from the blocks themselves.
   ------------------------------------------------------------------ */
body #content .ast-container,
body .ast-container,
.tide-wrap {
	max-width: var(--tide-measure);
	margin-inline: auto;
	padding-inline: 24px;
	width: 100%;
}

/* Astra surfaces that would sit white over the dark ground. */
.ast-article-post,
.ast-article-single,
.ast-separate-container .ast-article-post,
.ast-separate-container .ast-article-single {
	background: transparent;
	box-shadow: none;
	padding: 0;
}

/* The fragment owns the H1 through its hero, so the core page title
   steps aside; the companion edit belongs in functions.php. */
.page .entry-header { display: none; }

/* A sidebar rail would break the single measure; pages run full width. */
body.page #secondary { display: none; }

/* ------------------------------------------------------------------
   5. Header band. Selectors match the agreed markup exactly:
   .tide-header > .tide-wrap.tide-header__inner > .tide-header__brand
   with .tide-logo and .tide-tagline. The measure comes from
   .tide-wrap on the inner div, so the band never runs edge to edge
   (pilot gate item 12, header defect). Revision 1.1.0: the lockup
   stacks into a strict column, wordmark over tagline, left aligned;
   the inner row centres the brand and the nav vertically against each
   other so the band reads aligned at every width.
   ------------------------------------------------------------------ */
.tide-header {
	position: relative;
	z-index: 20; /* the band paints over page content it may overlap */
	background: var(--tide-surface);
	border-bottom: 1px solid var(--tide-border);
}

.tide-header__inner {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem 1.5rem;
	min-height: 4.5rem;
	padding-top: 0.6rem;
	padding-bottom: 0.6rem;
}

.tide-header__brand {
	display: flex;
	flex-direction: column; /* the lockup stacks: wordmark, tagline under */
	align-items: flex-start;
	gap: 0.15rem;
	min-width: 0;
}

.tide-logo,
.tide-logo a {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	font-family: var(--tide-font-headings);
	font-weight: 700;
	font-size: 1.35rem;
	letter-spacing: -0.01em;
	color: var(--tide-head);
	text-decoration: none;
	white-space: nowrap;
}

/* The wordmark glyph is an inline svg in the markup. It draws in
   currentColor, which this rule holds at the accent. */
.tide-logo svg {
	width: 1.1em;
	height: 1.1em;
	flex: 0 0 auto;
	color: var(--tide-accent);
}

.tide-tagline {
	margin: 0;
	color: var(--tide-muted);
	font-size: 0.8125rem;
	line-height: 1.3;
}

/* ------------------------------------------------------------------
   6. Nav row with dropdown panels. Revision 1.1.0: on desktop the row
   right aligns and wraps instead of scrolling, which is what makes
   absolute panels possible, because an overflow scroller would clip
   them. Each hub with children opens its .tide-nav__sub panel on hover
   and on keyboard focus within, at 1025 and up; the panel lists the
   hub first, then its child pages. At 1024 and below the row is a
   scroller again and the panels stay closed, since touch has no hover
   and each hub links to its page, which lists the same children. The
   panel is solid with a box-shadow, and no pseudo element anywhere in
   this file paints at a negative z-index (the spec's dropdown rule).
   Revision 1.2.0: the tree behind this markup is the only nav source
   (functions.php revision 4); the .sub-menu rules stay as harmless
   cover for any future menu render.
   ------------------------------------------------------------------ */
.tide-nav {
	flex: 0 1 auto;
	min-width: 0;
}

.tide-nav__list {
	display: flex;
	flex-wrap: wrap; /* the row wraps right aligned on desktop */
	justify-content: flex-end;
	align-items: center;
	gap: 0.1rem 0.15rem;
	list-style: none;
	margin: 0;
	padding: 0.25rem 0;
}

.tide-nav__list li {
	position: relative; /* the containing block for a hub's panel */
	white-space: nowrap;
}

.tide-nav__list > li { flex: 0 0 auto; }

.tide-nav__list a {
	display: block;
	padding: 0.55rem 0.7rem;
	border-radius: var(--tide-radius);
	color: var(--tide-ink);
	font-size: 0.95rem;
	text-decoration: none;
}

.tide-nav__list a:hover,
.tide-nav__list a:focus-visible {
	color: var(--tide-accent);
	background: rgba(57, 213, 192, 0.08);
}

.tide-nav__list .current-menu-item > a,
.tide-nav__list .current_page_item > a { color: var(--tide-accent); }

.tide-nav__list .menu-item-has-children > a::after {
	content: "\25BE";
	margin-left: 0.35rem;
	font-size: 0.7em;
	color: var(--tide-muted);
}

/* The dropdown panel. Closed at base; opened only at 1025 and up, so
   the scroller widths never need to clip it. The panel is its own
   object with its own edge, so its long lists scroll inside it. */
.tide-nav__list .tide-nav__sub,
.tide-nav__list .sub-menu {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 30;
	min-width: 15rem;
	max-width: 20rem;
	max-height: min(60vh, 26rem);
	overflow-y: auto;
	margin: 0.35rem 0 0;
	padding: 0.35rem;
	background: var(--tide-surface);
	border: 1px solid var(--tide-border);
	border-radius: var(--tide-radius);
	box-shadow: 0 12px 28px rgba(2, 18, 22, 0.65); /* elevation, not a painted backdrop */
	list-style: none;
	scrollbar-width: thin;
	scrollbar-color: var(--tide-border) transparent;
}

/* The last hub sits against the right edge: its panel anchors right,
   so it can never leave the viewport. */
.tide-nav__list > li:last-child .tide-nav__sub,
.tide-nav__list > li:last-child .sub-menu {
	left: auto;
	right: 0;
}

@media (min-width: 1025px) {
	.tide-nav__list li:hover > ul,
	.tide-nav__list li:focus-within > ul { display: block; }
}

.tide-nav__sub a,
.tide-nav__list .sub-menu a {
	padding: 0.45rem 0.6rem;
	border-radius: 3px;
	color: var(--tide-ink);
	font-size: 0.9rem;
	background: none;
}

/* The hub's own entry leads the panel: bold, tinted, divided. */
.tide-nav__sub .tide-nav__hub {
	font-weight: 700;
	color: var(--tide-head-2);
	border-bottom: 1px solid var(--tide-border);
	margin-bottom: 0.25rem;
}

.tide-nav__sub .tide-nav__hub:hover,
.tide-nav__sub .tide-nav__hub:focus-visible {
	color: var(--tide-accent);
	background: none;
}

/* ------------------------------------------------------------------
   7. Breadcrumb: a small muted strip. The plugin prints either
   separator spans or a list; both readings are covered.
   ------------------------------------------------------------------ */
.tp-breadcrumb,
.ast-breadcrumbs {
	font-size: 0.8125rem;
	color: var(--tide-muted);
	padding: 0.55rem 0;
}

.tp-breadcrumb a,
.ast-breadcrumbs a {
	color: var(--tide-muted);
	text-decoration: none;
}

.tp-breadcrumb a:hover,
.tp-breadcrumb a:focus-visible,
.ast-breadcrumbs a:hover { color: var(--tide-accent); }

.tp-breadcrumb__sep,
.tp-breadcrumb .sep {
	margin: 0 0.5rem;
	opacity: 0.55;
}

.tp-breadcrumb li + li::before {
	content: "/";
	margin: 0 0.5rem;
	opacity: 0.55;
}

/* The crumb for the page in hand reads muted, like the strip. */
.tp-breadcrumb__current { color: var(--tide-muted); }

/* ------------------------------------------------------------------
   8. Hero: a surface panel with a 4px radius and a hairline aqua top
   rule. The standfirst is larger than body copy and spans the full
   measure like every block. The lead-in paragraph is the writer's
   own, in market terms, immediately before the board marker.
   ------------------------------------------------------------------ */
.tp-hero {
	background: var(--tide-surface);
	border: 1px solid var(--tide-border);
	border-top: 1px solid var(--tide-accent); /* the hairline aqua rule */
	border-radius: var(--tide-radius);
	padding: 2rem;
	margin: 0 0 1.4rem;
}

.tp-hero h1 { margin: 0 0 0.55rem; }

.tp-standfirst {
	font-size: 1.25rem;
	line-height: 1.6;
	color: var(--tide-foam);
	margin: 0;
}

.tp-board-leadin {
	margin: 0 0 1.2rem;
	color: var(--tide-ink);
}

/* ------------------------------------------------------------------
   9. Board skin: horizontal ledger rows, one row per offer, generous
   but not card-like. Flat accent fill on the scale (the plugin sets
   the width inline; this sheet only paints it), tabular numerals,
   hairlines between rows, dark text on the accent CTA. The score
   wrapper is the grid child: it lays the bar and the numeral out in
   a row, and the header block carries the board title and lead.
   ------------------------------------------------------------------ */
.tbd-ledger {
	background: var(--tide-surface);
	border: 1px solid var(--tide-border);
	border-radius: var(--tide-radius);
	margin: 0 0 2rem;
	overflow: hidden;
}

/* The board prints its over-line, title and lead inside a tbd-head
   header, so these rules reach inside it: the heading is the title,
   the first paragraph the small uppercase over-line, the second the
   muted lead. Inline padding matches the ledger rows. */
.tbd-head h2 {
	margin: 0;
	padding: 1.1rem 1.25rem 0.2rem;
}

.tbd-head p {
	margin: 0;
	padding: 0 1.25rem 0.9rem;
	color: var(--tide-muted);
	font-size: 0.9rem;
}

.tbd-head p:first-child {
	padding-top: 1.1rem;
	font-size: 0.75rem;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.tbd-row {
	display: grid;
	grid-template-columns: 2.75rem 12.5rem 10.5rem minmax(0, 1fr) auto;
	grid-template-areas:
		"rank brand scale offer cta"
		"rank brand scale chips cta";
	gap: 0.4rem 1.1rem;
	align-items: center;
	padding: 1rem 1.25rem;
	border-top: 1px solid var(--tide-border); /* hairline between rows */
}

.tbd-rank {
	grid-area: rank;
	font-size: 1.4rem;
	font-weight: 700;
	color: var(--tide-muted);
	font-variant-numeric: tabular-nums;
}

.tbd-brand {
	grid-area: brand;
	font-family: var(--tide-font-headings);
	font-weight: 700;
	font-size: 1.08rem;
	letter-spacing: -0.01em;
	color: var(--tide-head);
}

.tbd-scale {
	position: relative;
	flex: 1 1 auto;
	height: 0.5rem;
	border-radius: var(--tide-radius);
	background: var(--tide-track);
	overflow: hidden;
}

.tbd-scale-fill {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	background: var(--tide-accent); /* flat accent fill, no gradient */
}

.tbd-score {
	grid-area: scale;
	display: flex;
	align-items: center;
	gap: 0.6rem;
	font-weight: 700;
	color: var(--tide-foam);
	font-variant-numeric: tabular-nums;
}

.tbd-offer {
	grid-area: offer;
	color: var(--tide-ink);
	font-size: 0.95rem;
	line-height: 1.55;
}

.tbd-chips {
	grid-area: chips;
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem;
}

.tbd-chip {
	border: 1px solid var(--tide-border);
	border-radius: 999px;
	padding: 0.16rem 0.6rem;
	background: var(--tide-track);
	color: var(--tide-foam);
	font-size: 0.72rem;
	letter-spacing: 0.02em;
}

.tbd-cta {
	grid-area: cta;
	justify-self: end;
	align-self: center;
}

.tbd-cta a,
a.tbd-cta {
	display: inline-block;
	background: var(--tide-accent); /* flat accent fill */
	color: var(--tide-on-accent);   /* dark text on the aqua fill */
	font-weight: 700;
	font-size: 0.9rem;
	padding: 0.6rem 1.1rem;
	border: 0;
	border-radius: var(--tide-radius);
	text-decoration: none;
	cursor: pointer;
}

.tbd-cta a:hover,
.tbd-cta a:focus-visible,
a.tbd-cta:hover,
a.tbd-cta:focus-visible {
	background: var(--tide-foam);
	color: var(--tide-on-accent);
}

.tbd-ledger .tbd-note {
	border-top: 1px solid var(--tide-border);
	padding: 0.8rem 1.25rem;
	color: var(--tide-muted);
	font-size: 0.8125rem;
}

/* ------------------------------------------------------------------
   10. Contents bar: a horizontal pill row of anchors, aqua on hover.
   The row is a scroller at base, at every width: it never wraps, so
   it can never overflow its measure or push the document sideways.
   A thin token-coloured scrollbar is the affordance here. The plugin
   prints the pills as a ul of li, so the list carries the flex row
   and each item holds a slot; the pill skin stays on the anchor,
   which the descendant selectors below reach inside the item.
   ------------------------------------------------------------------ */
.tp-contents {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: 0.45rem;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior-x: contain;
	scroll-snap-type: x proximity;
	scrollbar-width: thin;
	scrollbar-color: var(--tide-border) transparent;
	background: var(--tide-surface);
	border: 1px solid var(--tide-border);
	border-radius: var(--tide-radius);
	padding: 0.7rem 0.8rem;
	margin: 0 0 1.9rem;
}

/* The plugin prints the label as tp-contents__label; the title name
   is kept as a documented alternate, both styled identically. */
.tp-contents__label,
.tp-contents__title {
	flex: 0 0 auto;
	color: var(--tide-muted);
	font-size: 0.8125rem;
	margin-right: 0.25rem;
}

.tp-contents ul {
	display: flex;
	flex-wrap: nowrap;
	gap: 0.45rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.tp-contents li { flex: 0 0 auto; } /* the item holds the flex slot; the anchor inside wears the pill below */

.tp-contents a {
	flex: 0 0 auto;
	white-space: nowrap;
	scroll-snap-align: start;
	border: 1px solid var(--tide-border);
	border-radius: 999px;
	background: var(--tide-track);
	color: var(--tide-ink);
	font-size: 0.8125rem;
	padding: 0.28rem 0.75rem;
	text-decoration: none;
}

.tp-contents a:hover,
.tp-contents a:focus-visible {
	color: var(--tide-accent);
	border-color: var(--tide-accent);
}

/* ------------------------------------------------------------------
   11. Tables. The wrapper is the scroll container at every width and
   the wrapper is what the layout sweep measures, never the table.
   Head row on surface-2, hairline borders, subtle zebra, muted
   caption, compact .tp-compare variant, tabular numerals.
   ------------------------------------------------------------------ */
.tp-tablewrap {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	margin: 1.5rem 0;
	scrollbar-width: thin;
	scrollbar-color: var(--tide-border) transparent;
}

.tp-tablewrap table { min-width: 620px; } /* the wrapper scrolls, never the document */

.tp-tablewrap table,
.tp-data,
.entry-content table {
	width: 100%;
	border-collapse: collapse;
	font-variant-numeric: tabular-nums;
}

.tp-tablewrap table th,
.tp-tablewrap table td,
.tp-data th,
.tp-data td,
.entry-content th,
.entry-content td {
	border: 1px solid var(--tide-border);
	padding: 0.6rem 0.75rem;
	text-align: left;
	vertical-align: top;
}

.tp-tablewrap table thead th,
.tp-data thead th,
.entry-content thead th {
	background: var(--tide-surface-2);
	font-family: var(--tide-font-headings);
	font-size: 0.85rem;
	letter-spacing: 0.01em;
	color: var(--tide-head);
}

.tp-tablewrap table tbody tr:nth-child(even),
.tp-data tbody tr:nth-child(even),
.entry-content tbody tr:nth-child(even) {
	background: rgba(11, 50, 59, 0.5); /* half strength surface for the zebra */
}

.tp-tablewrap table caption,
.tp-data caption,
.entry-content caption {
	caption-side: top;
	text-align: left;
	color: var(--tide-muted);
	font-size: 0.8125rem;
	padding: 0 0 0.6rem;
}

/* Compact comparison variant. */
.tp-compare th,
.tp-compare td {
	padding: 0.4rem 0.6rem;
	font-size: 0.85rem;
}

/* A model table that ships without a wrapper scrolls itself. Inside a
   wrapper the wrapper is the scroll container, so the table goes back
   to its normal display and exactly one scroller exists. */
.tp-data {
	display: block;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.tp-tablewrap .tp-data {
	display: table;
	overflow: visible;
}

/* ------------------------------------------------------------------
   12. Figures: frames with their own edge, so their padding is a
   legal inset. Captions in muted; inline SVG picks up currentColor.
   ------------------------------------------------------------------ */
.tp-figure {
	background: var(--tide-surface);
	border: 1px solid var(--tide-border);
	border-radius: var(--tide-radius);
	padding: 1rem;
	margin: 1.75rem 0;
	color: var(--tide-ink); /* inline SVG inherits this via currentColor */
}

.tp-figure img,
.tp-figure svg {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 3px; /* one step inside the 4px frame */
}

.tp-figure figcaption {
	color: var(--tide-muted);
	font-size: 0.8125rem;
	line-height: 1.55;
	margin-top: 0.65rem;
}

/* ------------------------------------------------------------------
   13. Calculator: labelled inputs, dark fields, a result panel with
   tabular numerals and a muted note line. Field and result class
   names follow the contract pinned between the plugin and tide.js.
   ------------------------------------------------------------------ */
.tp-calc {
	background: var(--tide-surface);
	border: 1px solid var(--tide-border);
	border-radius: var(--tide-radius);
	padding: 1.25rem;
	margin: 1.75rem 0;
}

.tp-calc__grid,
.tp-calc .tp-calc__fields {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.9rem 1rem;
	margin-bottom: 1rem;
}

.tp-calc label {
	display: block;
	color: var(--tide-muted);
	font-size: 0.8125rem;
	margin-bottom: 0.3rem;
}

.tp-calc input,
.tp-calc select {
	width: 100%;
	background: var(--tide-track);
	color: var(--tide-ink);
	border: 1px solid var(--tide-border);
	border-radius: var(--tide-radius);
	padding: 0.55rem 0.7rem;
	font: inherit;
	font-variant-numeric: tabular-nums;
}

.tp-calc input:focus,
.tp-calc select:focus { border-color: var(--tide-accent); }

.tp-calc__result,
.tp-calc .tp-calc__result {
	background: var(--tide-surface-2);
	border: 1px solid var(--tide-border);
	border-radius: var(--tide-radius);
	padding: 1rem 1.1rem;
	margin: 0 0 0.6rem;
	color: var(--tide-ink);
	font-variant-numeric: tabular-nums;
}

.tp-calc__result strong,
.tp-calc__value {
	color: var(--tide-foam);
	font-variant-numeric: tabular-nums;
}

.tp-calc__note,
.tp-calc .tp-calc__note {
	color: var(--tide-muted);
	font-size: 0.8125rem;
	margin: 0;
}

/* ------------------------------------------------------------------
   14. FAQ. Both shipped patterns are skinned: the details accordion
   the plugin prints behind the [data-tp-faq] hook, and the plain
   item pattern from the fragment canon (.tp-faq with .tp-faq__item,
   .tp-faq__q and .tp-faq__a). Revision 1.1.0: the question colour
   joined the heading pair so questions stand out of the answer text.
   ------------------------------------------------------------------ */
.tp-faq,
[data-tp-faq] { margin: 2rem 0; }

.tp-faq details,
[data-tp-faq] details {
	border-bottom: 1px solid var(--tide-border);
}

.tp-faq details:first-of-type,
[data-tp-faq] details:first-of-type {
	border-top: 1px solid var(--tide-border);
}

.tp-faq summary,
[data-tp-faq] summary {
	position: relative;
	padding: 0.85rem 2.1rem 0.85rem 0;
	cursor: pointer;
	list-style: none;
	font-weight: 700;
	color: var(--tide-head);
}

.tp-faq summary::-webkit-details-marker,
[data-tp-faq] summary::-webkit-details-marker { display: none; }

.tp-faq summary::after,
[data-tp-faq] summary::after {
	content: "\002B"; /* plus */
	position: absolute;
	right: 0.15rem;
	top: 50%;
	transform: translateY(-50%);
	color: var(--tide-accent);
	font-size: 1.3rem;
	font-weight: 400;
	line-height: 1;
}

.tp-faq details[open] summary::after,
[data-tp-faq] details[open] summary::after {
	content: "\2212"; /* minus */
}

/* Plain item pattern. */
.tp-faq__item {
	border-bottom: 1px solid var(--tide-border);
	padding: 1.05rem 0;
}

.tp-faq__q {
	color: var(--tide-head-2);
	font-size: 1.05rem;
	margin: 0 0 0.4rem;
}

.tp-faq__a {
	color: var(--tide-ink);
	font-size: 0.95rem;
	line-height: 1.65;
}

.tp-faq__a p { margin: 0; }

/* ------------------------------------------------------------------
   15. Care and compliance blocks: a bordered panel with a 3px aqua
   left edge, a slightly darker ground and muted text at 0.95rem.
   The padding is legal because the panel has its own edge.
   .tp-honesty is the honest offshore labelling block, skinned with
   the care panel.
   ------------------------------------------------------------------ */
.tp-care,
.tp-honesty {
	background: #041a20; /* one step darker than --tide-bg */
	border: 1px solid var(--tide-border);
	border-left: 3px solid var(--tide-accent);
	border-radius: var(--tide-radius);
	padding: 1rem 1.25rem;
	margin: 1.9rem 0;
	color: var(--tide-muted);
	font-size: 0.95rem;
	line-height: 1.6;
}

.tp-care p:last-child,
.tp-honesty p:last-child { margin-bottom: 0; }

.tp-care a,
.tp-honesty a { color: var(--tide-foam); }

/* ------------------------------------------------------------------
   16. Two-column list. The visible rule between the columns makes
   this an object with its own edge under the spec's inset rule, so
   its items may sit inside the columns. It collapses at 768.
   ------------------------------------------------------------------ */
.tp-twocol {
	columns: 2;
	column-gap: 2.5rem;
	column-rule: 1px solid var(--tide-border);
	margin: 0 0 1.5rem;
}

.tp-twocol li { break-inside: avoid; }

/* ------------------------------------------------------------------
   17. Onward links: a quiet row with dot separators. The plugin
   prints a muted heading and a list of links, so the heading carries
   its own class, the entry-content aqua h2 rule stays out of the
   block, and the separators hang off the list items.
   ------------------------------------------------------------------ */
.tp-onward {
	border-top: 1px solid var(--tide-border);
	margin: 2.2rem 0 0;
	padding-top: 1rem;
	color: var(--tide-muted);
	font-size: 0.9rem;
}

.tp-onward__heading {
	font-size: 0.9rem;
	color: var(--tide-muted);
	margin: 0 0 0.4rem;
}

/* The flat-anchor label is kept as a harmless alternate. */
.tp-onward__label { margin-right: 0.4rem; }

/* The entry-content aqua h2 rule stays out of the onward block. */
.tp-onward h2::before { content: none; }

.tp-onward__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.tp-onward__list li { display: inline; }

.tp-onward__list li + li::before {
	content: "\00B7";
	margin: 0 0.55rem;
	color: var(--tide-muted);
}

.tp-onward a {
	color: var(--tide-accent);
	text-decoration: none;
}

.tp-onward a:hover,
.tp-onward a:focus-visible { text-decoration: underline; }

/* ------------------------------------------------------------------
   18. Buttons: flat accent fill, dark text, no gradient anywhere.
   ------------------------------------------------------------------ */
body button,
body .button,
body input[type="submit"],
body input[type="button"],
.tide-btn,
.wp-block-button__link {
	background: var(--tide-accent);
	color: var(--tide-on-accent);
	border: 0;
	border-radius: var(--tide-radius);
	padding: 0.6rem 1.1rem;
	font: inherit;
	font-weight: 700;
	text-decoration: none;
	cursor: pointer;
}

body button:hover,
body .button:hover,
body input[type="submit"]:hover,
body input[type="button"]:hover,
.tide-btn:hover,
.wp-block-button__link:hover {
	background: var(--tide-foam);
	color: var(--tide-on-accent);
}

/* Quiet secondary variant. */
.tide-btn--ghost {
	background: transparent;
	color: var(--tide-accent);
	border: 1px solid var(--tide-accent);
}

.tide-btn--ghost:hover {
	background: rgba(57, 213, 192, 0.08);
	color: var(--tide-accent);
}

/* ------------------------------------------------------------------
   19. Footer band. The measured container is .tide-footer__inner
   (pilot gate item 12, footer defect): the band carries vertical
   padding only, the .tide-wrap on the inner div supplies the measure
   and the gutter, and the colophon and links row span the same width
   as every flow block above them.
   ------------------------------------------------------------------ */
.site-footer,
.tide-footer {
	background: var(--tide-surface);
	border-top: 1px solid var(--tide-border);
	margin-top: 3rem;
	padding: 1.5rem 0 2rem;
	color: var(--tide-muted);
	font-size: 0.875rem;
}

.tide-footer__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.5rem 2rem;
}

.tide-footer__colophon {
	margin: 0;
	color: var(--tide-muted);
	font-size: 0.8125rem;
}

/* A quiet inline row with separators. Flat anchors and a list are
   both covered, whichever shape functions.php settles. */
.tide-footer__links {
	margin: 0;
	padding: 0;
	list-style: none;
}

.tide-footer__links ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.tide-footer__links li { display: inline; }

.site-footer a,
.tide-footer a {
	color: var(--tide-foam);
	text-decoration: none;
}

.site-footer a:hover,
.tide-footer a:hover,
.site-footer a:focus-visible,
.tide-footer a:focus-visible {
	color: var(--tide-accent);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.tide-footer__links a + a::before,
.tide-footer__links li + li::before {
	content: "\00B7";
	margin: 0 0.55rem;
	color: var(--tide-muted);
}

/* ------------------------------------------------------------------
   20. Motion: subtle hover and focus transitions only. Every
   selector that declares a transition is repeated in the
   reduced-motion block at the foot of the file.
   ------------------------------------------------------------------ */
a,
button,
summary,
.tide-logo,
.tide-nav__list a,
.tp-contents a,
.tbd-cta a,
a.tbd-cta {
	transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
}

/* ------------------------------------------------------------------
   21. Breakpoints: 1100, 1024, 768, 600, 390. Nothing else.
   ------------------------------------------------------------------ */

/* 1100: the ledger row folds. Rank, brand and CTA hold the top line;
   the scale, the offer line and the chips take full-width lines. */
@media (max-width: 1100px) {
	.tbd-row {
		grid-template-columns: 2.6rem minmax(0, 1fr) auto;
		grid-template-areas:
			"rank brand cta"
			"scale scale scale"
			"offer offer offer"
			"chips chips chips";
		gap: 0.5rem 0.9rem;
	}

	.tbd-scale { height: 0.45rem; }
}

/* 1024: tighter panels and the nav row returns to a one row scroller,
   because the wrapped desktop row would outgrow the band here. The
   dropdown panels stay closed on these widths: touch has no hover and
   each hub links to its page, which lists the same children. The
   tagline stays at every width: the brand keeps its column. */
@media (max-width: 1024px) {
	.tp-hero { padding: 1.6rem; }

	.tp-calc { padding: 1.1rem; }

	.tide-nav__list {
		flex-wrap: nowrap;
		justify-content: flex-start;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		overscroll-behavior-x: contain; /* the scroller never chains to the document */
		scrollbar-width: none;      /* Firefox */
		-ms-overflow-style: none;   /* legacy Edge */
	}

	.tide-nav__list::-webkit-scrollbar { display: none; } /* WebKit */

	.tide-nav__list a {
		padding: 0.55rem 0.55rem;
		font-size: 0.9rem;
	}
}

/* 768: the two-column list collapses to a single column and its rule
   goes with it. The header stays a row to 600; its nav scrolls. */
@media (max-width: 768px) {
	.tp-twocol {
		columns: 1;
		column-rule: none;
	}

	.tp-hero { padding: 1.3rem; }
}

/* 600: the header stacks to a column, the CTA takes its own
   full-width line and the calculator fields stack. */
@media (max-width: 600px) {
	.tide-header__inner {
		flex-direction: column;
		align-items: stretch;
		gap: 0.4rem;
		min-height: 0;
		padding-top: 0.75rem;
		padding-bottom: 0.5rem;
	}

	.tide-nav__list { padding-bottom: 0.4rem; }

	.tbd-row {
		grid-template-columns: 2.4rem minmax(0, 1fr);
		grid-template-areas:
			"rank brand"
			"cta cta"
			"scale scale"
			"offer offer"
			"chips chips";
	}

	.tbd-cta { justify-self: stretch; }

	.tbd-cta a,
	a.tbd-cta {
		display: block;
		width: 100%;
		text-align: center;
	}

	.tp-calc__grid,
	.tp-calc .tp-calc__fields { grid-template-columns: 1fr; }
}

/* 390: nothing overflows. The arithmetic: 390 of viewport, minus 48
   of wrap padding, minus 2 of ledger border, minus about 29 of row
   padding, leaves roughly 311 of row content. The only fixed track is
   the 38px rank numeral; the brand, the offer line, the chips and the
   full-width CTA wrap inside the rest, and the tables, the contents
   bar and the menu scroll inside their own containers, so the
   document never scrolls sideways. */
@media (max-width: 390px) {
	.tbd-row {
		padding: 0.85rem 0.9rem;
		gap: 0.4rem 0.75rem;
	}

	.tbd-rank { font-size: 1.15rem; }

	.tbd-chip {
		font-size: 0.68rem;
		padding: 0.12rem 0.5rem;
	}

	.tp-contents a {
		font-size: 0.75rem;
		padding: 0.25rem 0.6rem;
	}

	.tide-logo,
	.tide-logo a { font-size: 1.15rem; }

	.tp-hero { padding: 1rem; }

	.tp-calc { padding: 0.9rem; }
}

/* ------------------------------------------------------------------
   22. Reduced motion: every transition declared above is silenced
   here. Keep this list in step with any future transition rule.
   ------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		transition: none;
		animation: none;
	}

	a,
	button,
	summary,
	.tide-logo,
	.tide-nav__list a,
	.tp-contents a,
	.tbd-cta a,
	a.tbd-cta {
		transition: none;
	}

	.tide-nav__list,
	.tp-contents { scroll-snap-type: none; }
}

/* ------------------------------------------------------------------
   23. Revision 1.2.0 hard guarantees: heading colours that nothing
   Astra prints can move. This block exists because two operator
   reports in a row said the headings were still hard to see: once
   because the 1.1.0 pair sat too close to the body ink, and once
   because Astra's dynamic CSS competes for the same elements. The
   colours here are the last word; sizes and weights stay in section
   3 and are deliberately left without !important.
   ------------------------------------------------------------------ */
body.tide-deepsea h1,
body.tide-deepsea h2 {
	color: var(--tide-head) !important; /* pure white, the last word on h1 and h2 colour */
}

body.tide-deepsea h3,
body.tide-deepsea h4,
body.tide-deepsea h5,
body.tide-deepsea h6 {
	color: var(--tide-head-2) !important; /* bright aqua, the last word on h3 to h6 colour */
}

/* ------------------------------------------------------------------
   24. Self-review notes: fixes made, and decisions this file owns.
   ------------------------------------------------------------------ */
/*
   Braces and closure: every rule in this file has been checked as
   paired; the file carries no nested comments, no em dash and no
   exclamation mark outside code idioms and the documented guarantee
   block.

   Fixes made against pilot gate report item 12:
   1. Header selectors realigned to the agreed markup. The flex row
      now sits on .tide-header__inner instead of .tide-header
      .tide-wrap, which matched nothing; the lockup is
      .tide-header__brand, replacing the dead .tide-brand selector;
      the wordmark glyph is the inline svg in the markup, painted by
      .tide-logo svg at the accent, replacing the ::before text glyph.
   2. The footer gained its measured container. The band now carries
      vertical padding only; .tide-footer__inner is the .tide-wrap
      measure and holds .tide-footer__colophon and .tide-footer__links,
      so the colophon and the links row start and end on the sheet's
      rules at every width instead of breaking the one-width rule.
   3. The nav list originally scrolled at base with in-flow sub menus,
      because a horizontal scroller computes its vertical overflow to
      auto and would clip an absolute panel. Revision 1.1.0 supersedes
      the desktop half of that decision: see notes 7 and 8. The
      scroller survives at 1024 and below, where panels stay closed.
   4. Class canon aligned to BUILD_BRIEF_FIXES section 1: .twl-model
      became .tp-data, .twl-fig merged into .tp-figure, .twl-q and
      .twl-a became .tp-faq__item, .tp-faq__q and .tp-faq__a, and
      .twl-calc merged into .tp-calc. .tp-board-leadin and .tp-twocol
      are styled now; the twocol rule supplies the visible rule between
      the columns, which makes the list an object with its own edge.
      The model table keeps a self-scroll fallback for an unwrapped
      ship, suppressed inside a wrapper so exactly one scroller exists.
   5. Breakpoints reduced to 1100, 1024, 768, 600 and 390. The 900
      block is gone: the table wrappers scroll at base, so it guarded
      nothing. The contents bar also scrolls at base now, matching the
      sweep requirement that it scrolls at every width.

   Revision 1.1.0 notes, against the operator report:
   6. Headings lifted out of the body text. h1 and h2 read at
      --tide-head and h3 to h6 at --tide-head-2; sizes stepped up and
      the FAQ question and the board brand joined the heading pair.
   7. Header realigned. The lockup stacks into a strict column,
      wordmark over tagline, left aligned; the inner row centres brand
      and nav vertically against each other with explicit vertical
      padding. On desktop the nav row right aligns and wraps instead
      of scrolling, so every hub stays visible with no hidden cut-off
      edge; the one row scroller returns at 1024 and below.
   8. Dropdown panels. Each hub with published children opens an
      absolute .tide-nav__sub panel on hover and on focus within, at
      1025 and up, listing the hub first, then its child pages printed
      by tide_nav_tree() in functions.php from the WordPress page
      hierarchy. Because the desktop row no longer scrolls, nothing
      clips the panels; at the scroller widths the panels stay closed
      and the open rule lives in a min-width 1025 block so it cannot
      fire there. The last hub's panel anchors right so it never
      leaves the viewport, long panels scroll inside their own edge,
      and an assigned menu path would render .sub-menu panels
      identically.
   9. Home left the fallback row per the operator request: the
      wordmark is the home link.

   Revision 1.2.0 notes, against the second operator report:
   10. The heading pair was re-tuned, because the 1.1.0 values were my
       own mistake: --tide-head at #f2fbfa and --tide-head-2 at
       #aaefe3 both sat too close to the body ink #d9edf0 on the dark
       ground, so titles still melted into the text. The pair is now
       pure white and bright aqua #4fe3cd, h1 and h2 clamps grew, and
       the whole heading block is scoped to body.tide-deepsea so it
       out-ranks Astra's dynamic CSS by specificity. Section 23 adds
       the !important colour guarantee as the last word; the two
       failed rounds are the reason it exists.
   11. The navigation is single source now. functions.php revision 4
       removed the assigned-menu branch that let a WordPress menu
       print flat items with a Home link over the tree, which is what
       the operator still saw after revision 11. No menu location is
       registered any more; the sheet keeps the .sub-menu rules as
       harmless cover only. If a menu was assigned to the old
       Primary navigation location, it can stay assigned and simply
       stops being read.

   One width audit: max-width appears only on the measure containers
   (body .ast-container, .tide-wrap), on media at 100 percent and on
   the dropdown panel, an object with its own edge; min-width appears
   only on tables inside scroll wrappers and on the panel, both
   objects with their own edges; no rule narrows prose, and the
   standfirst carries no width of its own. Insets sit only inside
   objects with their own edges: hero, figures, calculator, care
   panels, table cells, ranking columns, the twocol list with its
   visible rule, and the dropdown panel.

   Contrast and tokens: text lives only in ink, muted, foam and the
   two heading tokens; every accent fill carries the dark on-accent
   text; the focus ring token drives every ring; selection pairs the
   accent with the dark on-accent text; text never wears a series
   colour.

   Motion: the reduced-motion block repeats every selector that
   declares a transition and kills the scroll snap; any future
   transition rule must be added there.

   Assumptions to confirm against functions.php: the logo anchor may
   be .tide-logo itself or wrap one, both covered; the footer links
   may print as flat anchors or as a list, both covered; the
   calculator keeps the __fields, __result and __note pairings from
   the passed sheet alongside the __grid and __value forms; the
   dropdown panels print as .tide-nav__sub from the page tree. Fragment
   body sections carry tp-sec-N ids only and need no skin of their own;
   the h2 rule and the section rhythm come from .entry-content.
   */