/* Motif figures. Colours come from the --tds-motif-* tokens (TDS_TOKEN_SPEC section 7); the world is drawn at build time. */
.uh-motif {
	display: block;
	width: 100%;
	height: auto;
	user-select: none;
	-webkit-tap-highlight-color: transparent;
}
.uh-motif--desktop { aspect-ratio: 640 / 400; }
.uh-motif--mobile { aspect-ratio: 360 / 132; }
.uh-motif .plate, .uh-motif .zone-ticks { stroke: var(--tds-motif-rule); stroke-width: 1; }
.uh-motif .m { fill: var(--tds-motif-mark); transition: fill 0.4s ease, opacity 0.25s ease; }
.uh-motif .m-data { fill: var(--tds-motif-data); }
.uh-motif .m-acc { fill: var(--tds-motif-accent); }
.uh-motif .m.m-off { visibility: hidden; }
.uh-motif .m.m-hi:not(.m-acc) { fill: var(--tds-motif-mark-hi); }
.uh-motif .m.m-lo { opacity: 0.22; }
.uh-motif .m-acc.m-lo { opacity: 0.45; }
.uh-motif .band { fill: var(--tds-motif-mark); fill-opacity: 0.09; }
.uh-motif .band--stream { fill: var(--tds-motif-stream); fill-opacity: 1; }
.uh-motif .band--stream.b-hi { fill: var(--tds-motif-stream-hi); fill-opacity: 1; }
.uh-motif .band--chan, .uh-motif .band--beel { fill: var(--tds-motif-channel); fill-opacity: 1; transition: fill 0.25s ease, opacity 0.25s ease; }
.uh-motif .band--chan.b-hi, .uh-motif .band--beel.b-hi { fill: var(--tds-motif-channel-hi); }
.uh-motif .band--beel { fill-opacity: 0.55; }
.uh-motif .band.b-lo { opacity: 0.45; }
.uh-motif .band--sheen { fill: var(--tds-motif-sheen); fill-opacity: 1; pointer-events: none; transition: opacity 0.25s ease; }
.uh-motif .band--sheen.b-lo { opacity: 0.3; }
.uh-motif .band--quiet { opacity: 0.5; }
.uh-motif .band--ridge { fill: none; stroke: var(--tds-motif-channel); stroke-width: 1.4; stroke-linecap: round; transition: stroke 0.25s ease, opacity 0.25s ease; }
.uh-motif .band--ridge.b-hi { stroke: var(--tds-motif-channel-hi); }
.uh-motif .band--coast, .uh-motif .band--isobath { fill: none; stroke: var(--tds-motif-coast); stroke-width: 1; stroke-linecap: round; pointer-events: none; }
.uh-motif .band--isobath { stroke-dasharray: 2 4; opacity: 0.8; }
.uh-motif .band--deep { opacity: 0.45; }
.uh-motif .band--coast.b-lo, .uh-motif .band--isobath.b-lo { opacity: inherit; }
.uh-motif .band--isobath.band--deep.b-lo { opacity: 0.45; }
.uh-motif .bands.is-hidden .band { opacity: 0; }
.uh-motif .arc { fill: none; stroke: var(--tds-motif-mark); stroke-opacity: 0.6; stroke-width: 1.1; }
.uh-motif .arc.a-hi { stroke: var(--tds-motif-mark-hi); stroke-opacity: 1; }
.uh-motif .arc.a-lo { stroke-opacity: 0.18; }
.uh-motif .arc--survey { stroke-dasharray: 3 3; stroke-opacity: 0.45; }
.uh-motif .arc--reveal { stroke-opacity: 0 !important; transition: stroke-opacity 0.2s ease; }
.uh-motif .arc--reveal.a-hi { stroke-opacity: 0.95 !important; stroke: var(--tds-motif-mark-hi); }
.uh-motif .ring { fill: none; stroke: var(--tds-motif-ring); stroke-width: 1.2; opacity: 0; transition: opacity 0.2s ease; }
.uh-motif[data-reveal="decision"] .ring, .uh-motif[data-reveal="research"] .ring { opacity: 1; }

/* ==========================================================================
   MOTIF-FIX-01: presentation components ported from prototype v18 (.fig-desk, .fig-band, .pop, .legend, .fig-foot,
   and the case-record cards of .sec). Colours come from the --tds-motif-* tokens.
   ========================================================================== */
.uh-motif-fig { position: relative; min-width: 0; }
.uh-motif-fig--desktop { display: flex; flex-direction: column; gap: 8px; padding-block: 1.25rem; }
.uh-motif-fig--mobile { display: none; margin-bottom: 0.25rem; }
.uh-motif-stage { position: relative; width: 100%; }
/* The plate is capped by screen height so the headline and CTA, not the graphic, set the hero height; the legend and foot use the full column. */
.uh-motif-fig--desktop .uh-motif-stage { max-width: min(100%, calc(48vh * 1.6)); margin-left: auto; }
/* Home: three router rows sit under the plate, so the plate gives up some height to keep the hero within budget. */
.uh-motif-fig--desktop.uh-motif-fig--router { padding-block: 1rem; }
.uh-motif-fig--router .uh-motif-stage { max-width: min(100%, calc(44vh * 1.6)); }

/* Reveal label beside an item, out of the layout flow (prototype .pop). */
.uh-motif-pop { position: absolute; z-index: 2; left: 0; top: 0; box-sizing: border-box; display: flex; flex-direction: column; gap: 3px; width: max-content; max-width: 250px; padding: 8px 10px; background: var(--tds-motif-mark-hi); color: var(--tds-ds-bg); border-radius: 3px; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35); font-family: var(--tds-font-system); font-size: var(--tds-type-size-label); line-height: var(--tds-type-line-label); pointer-events: none; }
.uh-motif-pop[hidden] { display: none; }
.uh-motif-pop strong { font-weight: var(--tds-weight-semibold); overflow-wrap: anywhere; }
@media (max-width: 991.98px) {
	/* The phone band is 131px tall: the label keeps to three title lines (the full title is in the list). */
	.uh-motif-pop strong { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
}
.uh-motif-pop span { font-family: var(--tds-font-technical); font-size: var(--tds-type-size-caption); line-height: var(--tds-type-line-caption); color: var(--tds-text-muted); }

/* Legend (prototype .legend): swatches use the accent and data colours; each entry lights its stream. */
.uh-motif-legend { display: flex; flex-wrap: wrap; gap: 4px 13px; padding-top: 9px; border-top: 1px solid var(--tds-motif-rule); }
.uh-motif-legend a, .uh-motif-legend__item { display: inline-flex; align-items: center; gap: 7px; min-height: 1.5rem; font-family: var(--tds-font-system); font-size: var(--tds-type-size-caption); font-weight: var(--tds-weight-medium); line-height: var(--tds-type-line-label); letter-spacing: var(--tds-type-track-label); text-transform: uppercase; color: var(--tds-ds-text-muted); text-decoration: none; transition: color 0.2s ease; }
.uh-motif-legend a:hover, .uh-motif-legend a:focus-visible, .uh-motif-legend a.is-on { color: var(--tds-ds-text-main); }
.uh-motif-legend a.is-on .lt { text-decoration: underline; text-decoration-color: var(--tds-ds-brand-kicker); text-underline-offset: 5px; }
.uh-motif-legend a:focus-visible { outline: var(--tds-focus-outline-inverse); outline-offset: var(--tds-focus-offset); border-radius: 2px; }
.uh-motif-legend small { font-family: var(--tds-font-technical); font-size: var(--tds-type-size-caption); font-weight: var(--tds-weight-regular); letter-spacing: var(--tds-type-track-caption); text-transform: none; color: var(--tds-ds-text-muted); }
.uh-motif-legend svg { flex: none; }
.uh-motif-legend svg .acc { fill: var(--tds-motif-accent); }
.uh-motif-legend svg .dat { fill: var(--tds-motif-data); }
.uh-motif-legend svg .ch { fill: none; stroke: var(--tds-motif-data); stroke-linecap: round; }
.uh-motif-legend--band { margin-top: 8px; gap: 4px 12px; }

/* Homepage router = the homepage figure legend. Hover or focus lights the stream; nothing is ever "selected". */
.uh-motif-router ul { flex: 1 1 auto; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 1.1rem; margin: 0; padding: 0; list-style: none; }
.uh-motif-router li { display: flex; margin: 0; }
.uh-motif-router a { gap: 0.5rem; letter-spacing: var(--tds-type-track-body); text-transform: none; font-weight: var(--tds-weight-regular); }
.uh-motif-router .lt { font-weight: var(--tds-weight-medium); letter-spacing: var(--tds-type-track-label); text-transform: uppercase; }
.uh-motif-router strong { font-weight: var(--tds-weight-semibold); }
.uh-motif-router .ar { margin-left: -0.1rem; }
.uh-motif-router a:hover .rs, .uh-motif-router a:focus-visible .rs { text-decoration: underline; text-underline-offset: 3px; }
.uh-motif-router a.is-on .lt { text-decoration: none; }

/* Foot (prototype .fig-foot): the dynamic caption on the left, Replay and About this figure on the right. */
.uh-motif-foot { position: relative; z-index: calc(var(--tds-z-elevated) + 1); display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; min-height: 2.25rem; }
.uh-motif-fig--mobile .uh-motif-foot { min-height: var(--tds-tap-target-min); }
.uh-motif-cap { flex: 1 1 auto; min-width: 0; max-height: 2.25rem; margin: 0; overflow: hidden; font-family: var(--tds-font-technical); font-size: var(--tds-type-size-caption); line-height: var(--tds-type-line-caption); color: var(--tds-ds-text-muted); }
.uh-motif-cap:empty { display: none; }
.uh-motif-cap.is-readout { font-family: var(--tds-font-system); font-size: var(--tds-type-size-label); line-height: var(--tds-type-line-label); color: var(--tds-ds-text-main); }
.uh-motif-cap.is-readout strong { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-weight: var(--tds-weight-semibold); }
.uh-motif-fig__tools { display: flex; flex: none; justify-content: flex-end; gap: 0.5rem; margin-left: auto; }
.uh-motif-fig__replay, .uh-motif-fig__about { display: inline-flex; align-items: center; gap: 0.4rem; font-family: var(--tds-font-system); font-size: var(--tds-type-size-caption); font-weight: var(--tds-weight-medium); line-height: 1; color: var(--tds-ds-text-muted); background: none; border: 1px solid var(--tds-motif-rule); border-radius: 3px; padding: 6px 9px; }
.uh-motif-fig--mobile .uh-motif-fig__about { min-height: var(--tds-tap-target-min); padding-inline: 0.75rem; }
.uh-motif-fig__replay[hidden], .uh-motif-fig__about[hidden] { display: none; }
.uh-motif-fig__replay:hover, .uh-motif-fig__about:hover, .uh-motif-fig__about[aria-expanded="true"] { color: var(--tds-ds-text-main); border-color: var(--tds-ds-text-muted); }
.uh-motif-fig__replay:focus-visible, .uh-motif-fig__about:focus-visible { outline: var(--tds-focus-outline-inverse); outline-offset: var(--tds-focus-offset); }
.uh-motif-fig__icon { flex: none; }

/* "About this figure": a non-modal panel over the figure, above the foot; it adds no height. */
.uh-motif-about { position: absolute; z-index: var(--tds-z-elevated); inset: 0 0 4rem 0; box-sizing: border-box; overflow: auto; padding: var(--tds-space-sm) var(--tds-space-md); background: var(--tds-motif-ground); color: var(--tds-ds-text-main); border: 1px solid var(--tds-motif-rule); font-size: var(--tds-type-size-label); line-height: var(--tds-type-line-snug); }
.uh-motif-about[hidden] { display: none; }
.uh-motif-about p { margin: 0 0 0.6em; max-width: 60ch; line-height: var(--tds-type-line-body); }
.uh-motif-about p:last-child { margin-bottom: 0; }
.uh-motif-fig--mobile .uh-motif-about { inset: 0 0 3rem 0; padding: var(--tds-space-xs); font-size: var(--tds-type-size-caption); }
.uh-motif-fig--mobile .uh-motif-about p { margin-bottom: 0.4em; }

.uh-motif-goals { margin-top: var(--tds-space-xs); }
.uh-motif-goals summary { cursor: pointer; }
.uh-motif-goals li { margin-block: var(--tds-space-xs); }
[data-uh-motif-row] [data-uh-motif-list-item]:focus-visible { outline: var(--tds-focus-outline); outline-offset: var(--tds-focus-offset); }

.uh-motif-entering .uh-motif .marks, .uh-motif-entering .uh-motif .ring { visibility: hidden; animation: uh-motif-failsafe 0s 2.5s forwards; }
@keyframes uh-motif-failsafe { to { visibility: visible; } }
@media (max-width: 991.98px) {
	.uh-motif-fig--desktop { display: none; }
	.uh-motif-fig--mobile { display: block; }
	/* The homepage figure's legend is the router: the plate hides, the router stays as stacked rows below the identifier line. */
	.uh-motif-fig--desktop.uh-motif-fig--router { display: block; padding-block: 0 var(--tds-space-md); }
	.uh-motif-fig--router .uh-motif-stage, .uh-motif-fig--router .uh-motif-foot, .uh-motif-fig--router .uh-motif-about { display: none; }
	.uh-motif-router { padding-top: 0; border-top: 0; }
	.uh-motif-router ul { flex-direction: column; align-items: stretch; gap: 0; }
	.uh-motif-router li.uh-motif-router__research { display: none; }
	.uh-motif-router a { width: 100%; min-height: var(--tds-tap-target-min); padding-block: 0.4rem; border-top: 1px solid var(--tds-motif-rule); }
	.uh-motif-router li:last-child a { border-bottom: 1px solid var(--tds-motif-rule); }
	.uh-motif-router .ar { margin-left: auto; }
}
@media (prefers-reduced-motion: reduce) {
	.uh-motif * { transition: none; }
	.uh-motif-legend a { transition: none; }
}

/* MOTIF-ALL-02: the current record stays accented, including without JavaScript. */
.uh-motif[data-uh-motif-mode="structure"] .m-here { fill: var(--tds-motif-accent); }
.uh-motif-structure-figure { background: var(--tds-motif-ground); color: var(--tds-ds-text-main); }
.uh-motif-structure-figure .uh-motif-fig--desktop { padding: var(--tds-space-xs); }
.uh-motif-structure-figure .uh-motif-fig--mobile { padding: var(--tds-space-xs); margin: 0; }
.uh-motif-structure-figure .uh-motif-fig--desktop .uh-motif-stage { max-width: 20rem; margin-inline: auto; }
.uh-motif-structure-figure .uh-motif-legend { max-width: 20rem; margin-inline: auto; }
.uh-hero--structure .uh-motif-about,
.uh-motif-structure .uh-motif-about { min-height: 0; }

/* D8: mobile narratives expand directly below the band, with no internal scrolling. */
@media (max-width: 991.98px) {
	.uh-motif-fig--mobile .uh-motif-about { position: static; inset: auto; width: 100%; max-height: none; overflow: visible; margin-top: var(--tds-space-xs); }
}