/* ==========================================================================
   Institutional trust panel — [tot_trust]
   Its own stylesheet, not an addition to tot.css, for the same reason
   questionnaire.css is separate: this renders on the institutional service
   pages, not on the directory page, and tot.css is already 36 KB against a
   documented budget it should not spend on a surface it never appears on.

   All colour comes from the tokens tot.css already defines. Nothing here
   invents a palette. Everything is scoped to .tot-inst so it cannot reach a
   page that does not carry the shortcode.
   ========================================================================== */

.tot-inst.tot-trust {
	/* Local aliases so the rules below read as roles rather than hex values.
	   These resolve against tot.css if it is present, and fall back to the
	   measured live values if the trust panel is ever used standalone. */
	--tt-ink: var(--tot-ink, #1b252f);
	--tt-yellow: var(--tot-yellow, #f8f812);
	--tt-paper: var(--tot-paper, #ffffff);
	--tt-body: var(--tot-body, #1f2937);
	--tt-muted: var(--tot-muted, #666666);
	--tt-rule: var(--tot-rule, #e2e8f0);
	--tt-deep: var(--tot-deep, #0c4a6e);
	--tt-display: var(--tot-display, "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif);
	--tt-text: var(--tot-text, Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif);
	--tt-label: var(--tot-label, Oswald, "Helvetica Neue", Helvetica, Arial, sans-serif);

	font-family: var(--tt-text);
	color: var(--tt-body);
}

.tot-trust__h {
	font-family: var(--tt-display);
	font-weight: 700;
	color: var(--tt-ink);
	margin: 0 0 0.75rem;
}

/* ---------- controls ---------- */
.tot-trust__ctrl {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 0.35rem;
	margin-bottom: 0.6rem;
}

.tot-trust__nav,
.tot-trust__pause {
	height: 2.3rem;
	/* was --tt-rule at 1.23:1 against white, below the 3:1 that 1.4.11 asks of a control boundary */
	border: 2px solid var(--tt-muted);
	background: transparent;
	color: var(--tt-ink);
	cursor: pointer;
	font-size: 0.95rem;
	line-height: 1;
}

.tot-trust__nav {
	width: 2.3rem;
}

.tot-trust__pause {
	padding: 0 0.8rem;
	font-family: var(--tt-label);
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	margin-right: auto;
}

.tot-trust__nav:hover,
.tot-trust__pause:hover {
	border-color: var(--tt-ink);
	background: var(--tt-yellow);
}

/* ---------- the rail ---------- */
.tot-trust__rail {
	/* 6px of padding is not decorative. The focus ring below is an OUTWARD box-shadow, and this
	   element is a scrollport (overflow-x: auto computes overflow-y: auto), so without room to
	   paint, the ring is clipped flat against the top and bottom card edges. Measured at 0.00px
	   clearance before this was added: only the vertical edges of the ring survived. */
	padding: 6px;
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(252px, 1fr);
	gap: 1px;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	/* The rail has 6px of padding for the focus ring, so a snap point sits 6px in. Without this
	   every snap lands 6px short and the card reads as slightly misaligned against the edge. */
	scroll-padding-left: 6px;
	background: var(--tt-rule);
	border: 1px solid var(--tt-rule);
}

.tot-trust__rec {
	scroll-snap-align: start;
	/* Promote the cards once, up front. Without it the browser rasterises each card mid-animation
	   and the scroll stutters on the first pass through the rail. */
	will-change: transform;
	text-align: left;
	font: inherit;
	color: inherit;
	cursor: pointer;
	background: var(--tt-paper);
	border: 0;
	border-top: 5px solid transparent;
	padding: 1.05rem 1.05rem 1.2rem;
	display: grid;
	gap: 0.55rem;
	align-content: start;
}

/* WCAG 1.4.11 wants 3:1 for a state indicator. Yellow on white measures 1.14:1, so the yellow
   alone cannot be the "this record is open" signal, however loud it looks to a sighted reader on
   a navy page. The ink bar carries the state and the yellow rides on top of it. */
.tot-trust__rec[aria-expanded="true"] {
	border-top-color: var(--tt-ink);
	background: var(--tt-paper);
	box-shadow: inset 0 5px 0 var(--tt-yellow);
}

.tot-trust__rec:hover {
	border-top-color: var(--tt-muted);
}

.tot-trust__sector {
	justify-self: start;
	font-family: var(--tt-label);
	font-size: 0.6rem;
	font-weight: 700;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	padding: 0.16rem 0.4rem;
	border: 1.5px solid var(--tt-muted);
	color: var(--tt-muted);
}

.tot-trust__org {
	font-family: var(--tt-display);
	font-size: 1.06rem;
	font-weight: 700;
	line-height: 1.22;
	color: var(--tt-ink);
}

.tot-trust__row {
	display: flex;
	gap: 0.6rem;
	align-items: baseline;
	flex-wrap: wrap;
}

.tot-trust__pax {
	font-family: var(--tt-display);
	font-weight: 700;
	font-size: 1.65rem;
	line-height: 1;
	color: var(--tt-ink);
	font-variant-numeric: tabular-nums;
}

.tot-trust__unit,
.tot-trust__when {
	font-family: var(--tt-label);
	font-size: 0.66rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	color: var(--tt-muted);
}

.tot-trust__when {
	margin-left: auto;
	font-variant-numeric: tabular-nums;
}

.tot-trust__line {
	font-size: 0.83rem;
	line-height: 1.5;
}

/* ---------- the opened record ---------- */
.tot-trust__record {
	border: 1px solid var(--tt-rule);
	border-top: 5px solid var(--tt-yellow);
	background: var(--tt-paper);
	padding: 1.5rem 1.2rem;
	margin-top: 1px;
}

/* 🔴 LOAD-BEARING, not belt-and-braces. JNews ships `article { display: block }` as an AUTHOR
   rule, which beats the user-agent `[hidden] { display: none }`. Delete this and every record is
   permanently expanded under that theme, with the buttons doing nothing. */
.tot-trust__record[hidden] {
	display: none;
}

.tot-trust__record-in {
	display: grid;
	gap: 1.2rem 2.4rem;
}

@media (min-width: 820px) {
	.tot-trust__record-in {
		grid-template-columns: 16rem minmax(0, 1fr);
	}
}

.tot-trust__record h3 {
	font-family: var(--tt-display);
	font-size: 1.4rem;
	font-weight: 700;
	margin: 0;
	color: var(--tt-ink);
}

.tot-trust__sub {
	font-family: var(--tt-label);
	/* 0.73rem (11.7px) until 15 Aug 2026. Raised with the institutional type scale: the body copy
	   around this panel went to 1.06rem (17px) and an 11.7px label beside it read as an accident.
	   Omer's call, confirmed directly. */
	font-size: 0.875rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--tt-muted);
	margin: 0.3rem 0 0;
}

.tot-trust__led {
	margin: 1rem 0 0;
	border-top: 2px solid var(--tt-ink);
}

.tot-trust__led > div {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	border-bottom: 1px solid var(--tt-rule);
	padding: 0.45rem 0;
}

.tot-trust__led dt {
	font-family: var(--tt-label);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	color: var(--tt-muted);
}

.tot-trust__led dd {
	margin: 0;
	font-size: 0.87rem;
	font-weight: 700;
	text-align: right;
	color: var(--tt-ink);
	font-variant-numeric: tabular-nums;
}

.tot-trust__record p {
	max-width: 66ch;
	margin: 0;
}

.tot-trust__record p + p {
	margin-top: 0.7rem;
}

/* WCAG 1.4.1: this link sits inside body text and the theme strips underlines, so colour was the
   only cue. Measured 1.55:1 between the link and the text around it, against the 3:1 that a
   colour-only distinction needs. The underline is the fix; the ratio is unchangeable without
   making the link ugly. */
.tot-trust__credit a {
	color: var(--tt-deep);
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.tot-trust__credit a:hover,
.tot-trust__credit a:focus-visible {
	color: var(--tt-ink);
	background: var(--tt-yellow);
}

.tot-trust__record p.tot-trust__pull {
	border-left: 5px solid var(--tt-yellow);
	padding: 0.15rem 0 0.15rem 0.9rem;
	margin-top: 1rem;
	color: var(--tt-ink);
	/* 🔴 This carried NO font-size until 15 Aug 2026, so it inherited and rendered at 14px, BELOW
	   the 17px body copy around it. A pull quote smaller than the prose it is pulled from is a
	   hierarchy inversion and reads as broken whatever the taste. It also could not be fixed from
	   inst.css: `.tot-inst p:not([class])` deliberately skips classed paragraphs, and this one is
	   classed, which is exactly why it was left behind by the type pass. Omer's call, confirmed
	   directly, and it lands on the corporate hub and the /contact/ questionnaire panel together
	   because both surfaces render the same component. */
	font-size: 1.2rem;
	line-height: 1.5;
	font-weight: 600;
	max-width: 54ch;
}

/* Focus is visible against both the paper and the yellow. */
.tot-trust__rec:focus-visible,
.tot-trust__pause:focus-visible,
.tot-trust__nav:focus-visible {
	outline: 0;
	box-shadow: 0 0 0 3px var(--tt-ink), 0 0 0 6px var(--tt-yellow);
}