/**
 * Tool styling, matched to the site's existing design language.
 *
 * Taken from the homepage name-check block and the Elementor global kit rather
 * than invented: brand blue #0657B4, pill inputs and buttons, 16px cards on a soft
 * shadow, PT Sans for component headings over the theme's Poppins body text.
 *
 * Everything is scoped under .tcst-tool, and the class prefix is deliberately
 * tcst- rather than tcs-: the order plugin uses .tcs-card and .tcs-status too, and
 * a global rule from it would otherwise bleed in here.
 *
 * Fonts are not loaded — the theme already serves Poppins, PT Sans and DM Serif
 * Display, so these families resolve without a second request.
 */

.tcst-tool {
	--tcst-blue: #0657b4;
	--tcst-blue-dark: #054a98;
	--tcst-ink: #0b1b2b;
	--tcst-body: #334155;
	--tcst-muted: #777;
	--tcst-line: #e6ebf3;
	--tcst-field: #c9d3e0;
	--tcst-soft: #f8fafc;
	--tcst-ok: #2e7d32;
	--tcst-warn: #bf360c;
	--tcst-crit: #c62828;
	--tcst-shadow: 0 8px 24px rgba(0, 0, 0, .08);

	color: var(--tcst-body);
	font-family: inherit;
	line-height: 1.55;
	max-width: 46rem;
}

.tcst-tool *,
.tcst-tool *::before,
.tcst-tool *::after {
	box-sizing: border-box;
}

/* ------------------------------------------------------------------- form */

.tcst-tool__form {
	background: #fff;
	border-radius: 16px;
	box-shadow: var(--tcst-shadow);
	padding: 22px 24px;
}

.tcst-tool__label {
	display: block;
	font-family: 'PT Sans', sans-serif;
	font-weight: 600;
	font-size: 1.2rem;
	line-height: 1.25;
	color: var(--tcst-ink);
	margin: 0 0 5px;
}

/*
 * The eyebrow, matching the site's own hero cards: uppercase, tightly tracked,
 * heavy, in the brighter hero blue.
 */
.tcst-tool__eyebrow {
	margin: 0 0 6px;
	font-size: .78rem;
	font-weight: 800;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: #0d6efd;
}

.tcst-tool__hint {
	color: var(--tcst-body);
	font-size: .88rem;
	margin: 0 0 12px;
}

.tcst-tool__row {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	margin: 0;
}

.tcst-tool__input {
	flex: 1 1 220px;
	min-width: 0;
	padding: 13px 16px;
	border: 1px solid var(--tcst-field);
	border-radius: 999px;
	font: inherit;
	font-size: 1rem;
	color: #222;
	background: #fff;
}

.tcst-tool__input::placeholder {
	color: #9aa7b8;
}

.tcst-tool__btn {
	flex: 0 0 auto;
	padding: 13px 26px;
	border: 0;
	border-radius: 999px;
	background: var(--tcst-blue);
	color: #fff;
	font: inherit;
	font-size: 1rem;
	font-weight: 600;
	cursor: pointer;
}

.tcst-tool__btn:hover {
	background: var(--tcst-blue-dark);
}

.tcst-tool__btn[disabled] {
	opacity: .6;
	cursor: default;
}

.tcst-tool__input:focus-visible,
.tcst-tool__btn:focus-visible,
.tcst-choice:focus-visible,
.tcst-details__summary:focus-visible,
.tcst-form__input:focus-visible {
	outline: 2px solid var(--tcst-blue);
	outline-offset: 2px;
}

/* ----------------------------------------------------------------- status */

.tcst-tool__status {
	margin: 10px 0 0;
	font-size: .9rem;
	color: var(--tcst-body);
}

/* No message, no reserved space. */
.tcst-tool__status:empty {
	display: none;
	margin: 0;
}

.tcst-tool__status.is-warn { color: var(--tcst-warn); font-weight: 600; }
.tcst-tool__status.is-error { color: var(--tcst-crit); font-weight: 600; }

/*
 * Confirmation that a result was produced further down the page. The arrow is
 * decoration on top of wording that already says "below", so nothing depends on
 * it being announced.
 */
.tcst-tool__status.is-found { color: var(--tcst-blue); font-weight: 600; }
.tcst-tool__status.is-found::after { content: ' \2193'; }

/* ------------------------------------------------------------------- card */

.tcst-card {
	margin-top: 10px;
	padding: 18px 20px;
	background: #fff;
	border-radius: 16px;
	box-shadow: var(--tcst-shadow);
}

.tcst-card__head { margin-bottom: 12px; }

.tcst-card__title {
	font-family: 'PT Sans', sans-serif;
	font-weight: 600;
	font-size: 1.15rem;
	line-height: 1.25;
	color: var(--tcst-ink);
	margin: 0;
}

.tcst-card__id {
	margin: 0;
	font-size: .85rem;
	color: var(--tcst-muted);
}

.tcst-card__lead {
	margin: 0 0 8px;
	font-weight: 600;
	color: var(--tcst-ink);
}

.tcst-card__reason {
	margin: 0 0 8px;
	font-size: .93rem;
}

/* The explanation sits below the action, whose margin is bottom-only, so the air
   above it has to come from here. Applies to every skin. */
.tcst-block--cta + .tcst-card__reason { margin-top: 12px; }

.tcst-card__note {
	margin: 10px 0 0;
	font-size: .8rem;
	color: var(--tcst-muted);
}

/* ------------------------------------------------------------------- pill */

/* Title and verdict share a line: on a name check the verdict is the answer, and
   stacking them pushed everything below it down a row for no gain. */
.tcst-card__topline {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 10px;
	margin-bottom: 8px;
}

.tcst-verdict { margin-bottom: 10px; }
.tcst-card__topline .tcst-verdict { margin-bottom: 0; }

.tcst-pill {
	display: inline-block;
	padding: 7px 16px;
	border-radius: 999px;
	font-size: .85rem;
	font-weight: 700;
	background: var(--tcst-soft);
	color: var(--tcst-body);
	border: 1px solid var(--tcst-line);
}

.tcst-pill--good { background: #eaf5ea; border-color: #cfe6d0; color: var(--tcst-ok); }
.tcst-pill--warn { background: #fdefe8; border-color: #f6d8c8; color: var(--tcst-warn); }
.tcst-pill--critical { background: #fdeaea; border-color: #f5cfcf; color: var(--tcst-crit); }
.tcst-pill--accent { background: #eaf1fa; border-color: #cfdff2; color: var(--tcst-blue); }

/* ----------------------------------------------------------------- blocks */

.tcst-block {
	margin-top: 12px;
	padding-top: 10px;
	border-top: 1px solid var(--tcst-line);
}

.tcst-block__title {
	font-family: 'PT Sans', sans-serif;
	font-weight: 600;
	font-size: 1rem;
	color: var(--tcst-ink);
	margin: 0 0 5px;
}

.tcst-block--cta {
	background: var(--tcst-soft);
	border: 1px solid var(--tcst-line);
	border-top: 1px solid var(--tcst-line);
	border-radius: 12px;
	padding: 12px 14px;
	margin-top: 12px;
}

.tcst-block--cta p { margin: 0; font-size: .92rem; }

.tcst-list {
	margin: 0;
	padding-left: 1.15rem;
	font-size: .92rem;
}

.tcst-list li { margin-bottom: 4px; }
.tcst-list li:last-child { margin-bottom: 0; }

.tcst-list--filings {
	list-style: none;
	padding-left: 0;
	margin-top: 8px;
}

.tcst-list--filings li {
	display: flex;
	flex-wrap: wrap;
	gap: 2px 14px;
	padding: 8px 0;
	border-bottom: 1px solid var(--tcst-line);
}

.tcst-list--filings li:last-child { border-bottom: 0; }

.tcst-filing__date {
	flex: 0 0 9rem;
	font-size: .82rem;
	color: var(--tcst-muted);
	font-variant-numeric: tabular-nums;
}

.tcst-filing__desc { flex: 1 1 14rem; }

.tcst-office__addr {
	margin: 0;
	font-size: 1rem;
	line-height: 1.5;
	color: var(--tcst-ink);
}

/* ------------------------------------------------------------------ table */

.tcst-scroll {
	max-width: 100%;
	overflow-x: auto;
	background: var(--tcst-soft);
	border: 1px solid var(--tcst-line);
	border-radius: 12px;
}

.tcst-table {
	width: 100%;
	min-width: 30rem;
	border-collapse: collapse;
	font-size: .9rem;
}

.tcst-table th {
	text-align: left;
	padding: 10px 14px;
	font-size: .75rem;
	letter-spacing: .06em;
	text-transform: uppercase;
	font-weight: 600;
	color: var(--tcst-blue);
	border-bottom: 1px solid var(--tcst-line);
	white-space: nowrap;
}

.tcst-table td {
	padding: 10px 14px;
	border-bottom: 1px solid var(--tcst-line);
	vertical-align: top;
}

.tcst-table tr:last-child td { border-bottom: 0; }
.tcst-table__label { color: var(--tcst-ink); font-weight: 600; }
.tcst-table__note { font-size: .8rem; color: var(--tcst-muted); }

.tcst-num,
.tcst-table td.tcst-num {
	text-align: right;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

.tcst-table tfoot td {
	border-top: 1px solid var(--tcst-field);
	border-bottom: 0;
	font-weight: 700;
	color: var(--tcst-ink);
	background: #fff;
}

/* ---------------------------------------------------------------- choices */

.tcst-choices { list-style: none; margin: 0; padding: 0; }

.tcst-choice {
	display: block;
	width: 100%;
	text-align: left;
	padding: 10px 14px;
	background: var(--tcst-soft);
	border: 1px solid var(--tcst-line);
	border-radius: 12px;
	font: inherit;
	cursor: pointer;
}

.tcst-choice:hover {
	border-color: var(--tcst-blue);
	background: #f2f7fd;
}

.tcst-choice__name {
	display: block;
	font-weight: 600;
	color: var(--tcst-ink);
}

.tcst-choice__meta {
	display: block;
	font-size: .82rem;
	color: var(--tcst-muted);
}

/* ---------------------------------------------------------------- details */

.tcst-details { margin-top: 4px; }

.tcst-details__summary {
	cursor: pointer;
	font-size: .9rem;
	font-weight: 600;
	color: var(--tcst-blue);
}

.tcst-details[open] .tcst-details__summary { margin-bottom: 6px; }

/* ------------------------------------------------------------------- form */

.tcst-form { margin-top: 14px; }

.tcst-form__field { margin-bottom: 12px; }

.tcst-form__label {
	display: block;
	font-size: .9rem;
	font-weight: 600;
	color: var(--tcst-ink);
	margin-bottom: 5px;
}

/*
 * Form fields take a modest radius, not the pill used on the search box. A pill
 * reads as a single search control; a column of pill-shaped inputs reads as a
 * mistake, and the site's own multi-field forms use rounded rectangles.
 */
.tcst-form__input {
	width: 100%;
	padding: 13px 16px;
	border: 1px solid var(--tcst-field);
	border-radius: 10px;
	font: inherit;
	font-size: 1rem;
	color: #222;
	background: #fff;
}

.tcst-form__input:is(textarea) {
	resize: vertical;
	min-height: 5.5rem;
}

.tcst-form__hint {
	margin: 5px 0 0;
	font-size: .8rem;
	color: var(--tcst-muted);
}

.tcst-form__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	margin-top: 6px;
}

.tcst-form__actions .tcst-form__hint { margin: 0; }

.tcst-form__msg { margin: 12px 0 0; font-size: .92rem; }
.tcst-form__msg.is-error { color: var(--tcst-crit); font-weight: 700; }
.tcst-form__msg.is-good { color: var(--tcst-ok); font-weight: 700; }

/* Honeypot: out of sight, out of the tab order, still in the DOM for bots. */
.tcst-form__hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* ---------------------------------------------------------------- narrow */

/*
 * 620px is the breakpoint the site's own name-check card uses, so the tools change
 * shape at the same width as everything around them.
 */
@media (max-width: 620px) {
	.tcst-tool { max-width: 100%; }

	/* Field and button stack, and the button fills the row. */
	.tcst-tool__row { flex-direction: column; align-items: stretch; }
	.tcst-tool__input { flex: 1 1 auto; width: 100%; }
	.tcst-tool button.tcst-tool__btn,
	.tcst-tool a.tcst-tool__btn { width: 100%; text-align: center; }

	.tcst-tool__form { padding: 18px 16px; }
	.tcst-card { padding: 16px 16px; }
	.tcst-tool__label { font-size: 1.1rem; }
	.tcst-card__title { font-size: 1.05rem; }

	/* Actions stack rather than squeezing side by side. */
	.tcst-block--cta { flex-direction: column; align-items: stretch; }
	.tcst-block--cta .tcst-form__hint { text-align: center; }
	.tcst-link-btn { text-align: center; }

	/* A wide table scrolls inside its own panel rather than the page. */
	.tcst-scroll { margin-inline: -2px; }
	.tcst-table { min-width: 26rem; }

	/* Filing rows: date above description rather than a cramped column. */
	.tcst-filing__date { flex: 0 0 100%; }
}

@media (max-width: 400px) {
	.tcst-tool__form { padding: 14px 12px; }
	.tcst-card { padding: 14px 12px; }
	.tcst-choice { padding: 10px 12px; }
}

@media (prefers-reduced-motion: reduce) {
	.tcst-tool * { transition: none !important; animation: none !important; }
}

/* ------------------------------------------------------- card tone accents */

/* Intentionally none: the verdict pill carries the state colour. */

/* The lead form sits on the soft ground so it reads as the next step, not
   another result. */
.tcst-card--form {
	background: var(--tcst-soft);
	border: 1px solid var(--tcst-line);
	box-shadow: none;
}

.tcst-card--form .tcst-form__input {
	background: #fff;
}

/* ------------------------------------------------------------- order CTA */

/* An anchor wearing the button's clothes. */
.tcst-tool__btn--link {
	display: inline-block;
	text-decoration: none;
	text-align: center;
}

.tcst-tool__btn--link:hover,
.tcst-tool__btn--link:focus {
	color: #fff;
	text-decoration: none;
}

/* The CTA block pairs an action with a short aside. */
.tcst-block--cta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
}

.tcst-block--cta .tcst-form__hint { margin: 0; }

/* ------------------------------------------------- register detail list */

/*
 * One pair per row with a fixed label column, so every value starts at the same
 * point. Two columns of inline pairs looked busy once the values were real: a long
 * address next to a one-word status gave the block no alignment to read down.
 *
 * The label is the quiet half and the value the loud one — the value is the
 * information, so it takes the darker weight.
 */
.tcst-details-list {
	display: grid;
	gap: 6px 0;
	margin: 0 0 10px;
	font-size: .88rem;
}

.tcst-details-list > div {
	display: flex;
	flex-wrap: wrap;
	gap: 0 14px;
	min-width: 0;
}

.tcst-details-list dt {
	flex: 0 0 10.5rem;
	font-weight: 400;
	color: var(--tcst-muted);
}

.tcst-details-list dd {
	flex: 1 1 12rem;
	margin: 0;
	min-width: 0;
	font-weight: 600;
	color: var(--tcst-ink);
	overflow-wrap: anywhere;
}

/* --------------------------------------------------------------- NI badge */

.tcst-badge {
	display: inline-block;
	font-style: normal;
	font-size: .66rem;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--tcst-ok);
	background: #e7f4e8;
	border-radius: 999px;
	padding: 2px 8px;
	margin-left: 6px;
	vertical-align: middle;
}

/*
 * The picker list scrolls vertically rather than growing without limit.
 *
 * overflow-x must be stated explicitly. Per spec, when one axis is not `visible`
 * the other computes to `auto` — so `overflow-y: auto` alone quietly permitted
 * sideways scrolling, and on a narrow screen a long address made the list slide
 * about inside the card.
 */
.tcst-choices {
	display: grid;
	gap: 8px;
	max-width: 100%;
	max-height: 240px;
	overflow-y: auto;
	overflow-x: hidden;
	padding-right: 4px;
}

.tcst-choices li { min-width: 0; }

.tcst-choice__meta { white-space: normal; overflow-wrap: anywhere; }

@media (max-width: 600px) {
	.tcst-details-list { gap: 8px 0; }
	.tcst-details-list dt { flex: 0 0 100%; }
}

/* --------------------------------------------------------- secondary action */

/*
 * A button that reads as a link. Used for "ask a question first", which sits
 * beside the primary action and must not compete with it.
 */
.tcst-link-btn {
	padding: 0;
	border: 0;
	background: none;
	font: inherit;
	font-size: .92rem;
	font-weight: 600;
	color: var(--tcst-blue);
	text-decoration: underline;
	text-underline-offset: 2px;
	cursor: pointer;
}

.tcst-link-btn:hover { color: var(--tcst-blue-dark); }

.tcst-link-btn:focus-visible {
	outline: 2px solid var(--tcst-blue);
	outline-offset: 2px;
	border-radius: 3px;
}

.tcst-card__reason a,
.tcst-card .tcst-note a,
.tcst-block a:not([class*="btn"]) { color: var(--tcst-blue); }


/* ==========================================================================
   Specificity floor
   --------------------------------------------------------------------------
   The theme and page builder style bare button, input and heading elements, so
   these are element-qualified and scoped to raise them above that.
   ========================================================================== */

.tcst-tool .tcst-tool__label,
.tcst-tool .tcst-card__title,
.tcst-tool .tcst-block__title {
	font-family: 'PT Sans', sans-serif !important;
	color: var(--tcst-ink) !important;
	letter-spacing: normal !important;
	text-transform: none !important;
}

.tcst-tool button.tcst-tool__btn,
.tcst-tool a.tcst-tool__btn,
.tcst-tool a.tcst-tool__btn .tcst-btn-label,
.tcst-tool button.tcst-tool__btn .tcst-btn-label {
	/* text-fill-color as well as color: the builder sets both. */
	color: #fff !important;
	-webkit-text-fill-color: #fff !important;
	text-shadow: none !important;
	opacity: 1 !important;
}

.tcst-tool button.tcst-tool__btn,
.tcst-tool a.tcst-tool__btn {
	padding: 13px 26px !important;
	border: 0 !important;
	border-radius: 999px !important;
	background: var(--tcst-blue) !important;
	line-height: 1.2 !important;
	font-family: inherit !important;
	font-size: 1rem !important;
	font-weight: 600 !important;
	text-transform: none !important;
	text-decoration: none !important;
	box-shadow: none !important;
	letter-spacing: normal !important;
}

.tcst-tool button.tcst-tool__btn:hover,
.tcst-tool a.tcst-tool__btn:hover,
.tcst-tool a.tcst-tool__btn:focus {
	background: var(--tcst-blue-dark) !important;
	color: #fff !important;
	-webkit-text-fill-color: #fff !important;
}

/* Same trap on the link-styled secondary action. */
.tcst-tool .tcst-link-btn,
.tcst-tool .tcst-link-btn .tcst-btn-label {
	-webkit-text-fill-color: var(--tcst-blue) !important;
}

.tcst-tool input.tcst-tool__input,
.tcst-tool input.tcst-form__input,
.tcst-tool textarea.tcst-form__input {
	padding: 13px 16px !important;
	border: 1px solid var(--tcst-field) !important;
	background: #fff !important;
	color: #222 !important;
	font-family: inherit !important;
	font-size: 1rem !important;
	box-shadow: none !important;
	height: auto !important;
}

/* Pill for the search box, rounded rectangle for form fields. */
.tcst-tool input.tcst-tool__input { border-radius: 999px !important; }

.tcst-tool input.tcst-form__input,
.tcst-tool textarea.tcst-form__input {
	border-radius: 10px !important;
	line-height: 1.5 !important;
}

.tcst-tool .tcst-choice,
.tcst-tool .tcst-link-btn {
	font-family: inherit !important;
	text-transform: none !important;
	letter-spacing: normal !important;
	box-shadow: none !important;
}

.tcst-tool .tcst-choice { background: var(--tcst-soft) !important; color: var(--tcst-body) !important; }
.tcst-tool .tcst-link-btn { background: none !important; border: 0 !important; padding: 0 !important; color: var(--tcst-blue) !important; }


/* ---------------------------------------------------- legacy skin handover */

/*
 * In legacy mode the host page owns the box: its own card, padding, field and
 * button styling all apply to the markup we emit. Our layout constraints step
 * aside, but the custom properties stay in scope so any of our own classes that
 * do render still resolve their colours.
 */
.tcst-tool[data-tcst-legacy="1"] {
	max-width: none;
	line-height: inherit;
	color: inherit;
}

.tcst-tool[data-tcst-legacy="1"] .tcst-tool__status { margin-top: 8px; }

/*
 * Nothing is declared for the host page's form here.
 *
 * This block previously set `display: revert` on those form ids, meaning to "step
 * aside". It did the opposite: an id selector at (1,2,0) outranked the page's own
 * `.hm-namecheck form` at (0,1,1), and revert rolls back to the user-agent value —
 * so the form became display:block, the page's flex layout was discarded, and the
 * field and button stacked with no gap between them. Silence is how you step aside.
 */

/*
 * The host page owns the field and button in legacy mode. Nothing is declared for
 * them here at all.
 *
 * An earlier attempt used `width: revert` to step aside, which was wrong: revert
 * rolls a property back to the *previous cascade origin*, so on an author
 * declaration it lands on the user-agent default and discards the page's own
 * author rule too. Both controls lost their full width and the button — sized to
 * its text plus padding — came out wider than the input beside it.
 *
 * The narrow rules further up only match .tcst-tool__btn and .tcst-tool__input,
 * which legacy markup does not carry, so there is nothing to opt out of.
 */


/* ------------------------------------------------------------- hero variant */

/*
 * A card sitting on a dark hero, as on the restoration and registered-office
 * pages. Roomier than the inline version, capped in width so it does not stretch
 * the full hero, and with air above it so it does not collide with the trust list.
 */
.tcst-tool--hero {
	max-width: 40rem;
	margin-top: 28px;
}

.tcst-tool--hero .tcst-tool__form {
	padding: 26px 28px;
	border-radius: 16px;
	box-shadow: 0 10px 28px rgba(11, 27, 43, .18);
}

.tcst-tool--hero .tcst-tool__label {
	font-size: 1.3rem;
}

/* Results sit on the hero too, so they need the same lift. */
.tcst-tool--hero .tcst-card {
	box-shadow: 0 10px 28px rgba(11, 27, 43, .18);
}

/* The status line is light-on-dark here, not dark-on-light. */
.tcst-tool--hero .tcst-tool__status {
	color: #dbe4f0;
}

.tcst-tool--hero .tcst-tool__status.is-found { color: #fff; }

@media (max-width: 620px) {
	.tcst-tool--hero { margin-top: 20px; max-width: 100%; }
	.tcst-tool--hero .tcst-tool__form { padding: 18px 16px; }
	.tcst-tool--hero .tcst-tool__label { font-size: 1.1rem; }
}


/* --------------------------------------------------------- external results */

/*
 * A results block placed away from its search box — typically the section below a
 * hero. It occupies no space until something renders into it.
 */
/*
 * External output, used where a result would otherwise inflate a hero. The
 * container is the first thing in the section below, so the space above a result
 * is that section's own top padding — 64px on the restoration page, where .wrap
 * sets it — plus the hero's bottom padding, which nothing here can reach.
 *
 * The bottom margin sits on the inner box rather than the wrapper: :empty takes
 * that box out of flow along with its margins, so an unused container occupies
 * nothing at all. On the wrapper it left 32px of blank section before a search.
 */
.tcst-tool--results { margin: 0; }
.tcst-tool--results .tcst-tool__out { margin-bottom: 32px; }
.tcst-tool--results .tcst-tool__out:empty { display: none; }
.tcst-tool--results .tcst-card:first-child { margin-top: 0; }

/*
 * Once there is something to show, cancel most of the section's padding so the
 * result reads as the answer to the form above it. 16px of the 64px is kept, so
 * the card stays inside its own section and does not cross into the hero. An
 * engine without :has() keeps the original gap, which is the current behaviour.
 */
.tcst-tool--results:has(.tcst-tool__out:not(:empty)) { margin-top: -48px; }

/*
 * Scroll clearance for the sticky header (86px desktop, 72px under 767px).
 *
 * This belongs on the element scrollIntoView is called on, which is the __out box
 * itself — revealOut() resolves data-tcst-out to that node, not to this wrapper.
 * On the wrapper it did nothing at all, so results landed flush with the viewport
 * top, behind the header, hiding the heading and the first row.
 */
.tcst-tool--results .tcst-tool__out { scroll-margin-top: 110px; }

@media (max-width: 767px) {
	.tcst-tool--results .tcst-tool__out { scroll-margin-top: 96px; }
}


/* ------------------------------------------------------- horizontal safety */

/*
 * Nothing may exceed its container's width. A flex or grid item defaults to
 * min-width:auto, which refuses to shrink below its content — so one long word,
 * company number or address pushes the whole card wider than the screen and the
 * result appears to slide about inside it.
 */
.tcst-tool,
.tcst-tool__form,
.tcst-card,
.tcst-block,
.tcst-tool__out {
	max-width: 100%;
	min-width: 0;
}

.tcst-card,
.tcst-card__reason,
.tcst-card__id,
.tcst-block p,
.tcst-list li,
.tcst-choice {
	overflow-wrap: anywhere;
	word-break: normal;
}

/* Flex and grid children that hold register text. */
.tcst-details-list > div,
.tcst-details-list dt,
.tcst-details-list dd,
.tcst-list--filings li,
.tcst-filing__date,
.tcst-filing__desc,
.tcst-block--cta,
.tcst-form__actions,
.tcst-card__topline,
.tcst-verdict {
	min-width: 0;
}

/* A long name must wrap rather than stretch the card. */
.tcst-card__title,
.tcst-choice__name {
	overflow-wrap: anywhere;
	min-width: 0;
}

/* Buttons keep their own width but never exceed the row. */
.tcst-tool button.tcst-tool__btn,
.tcst-tool a.tcst-tool__btn {
	max-width: 100%;
}


/* ------------------------------------------- legacy skin, horizontal safety */

/*
 * The same protection as above, for the class names the host pages style. Only
 * markup this plugin emits carries data-tcst-legacy, so these cannot reach the
 * page's own blocks.
 *
 * The badge was the visible symptom: appended after a long company name it ran
 * past the row and the list's own overflow clipped it. Making the name a wrapping
 * flex line lets the badge drop below instead.
 */
.tcst-tool[data-tcst-legacy="1"] .ro-list,
.tcst-tool[data-tcst-legacy="1"] .ro-pick,
.tcst-tool[data-tcst-legacy="1"] .ro-card,
.tcst-tool[data-tcst-legacy="1"] .tcs-card {
	max-width: 100%;
	min-width: 0;
	overflow-x: hidden;
}

.tcst-tool[data-tcst-legacy="1"] .ro-pick strong {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 6px;
	min-width: 0;
	overflow-wrap: anywhere;
}

.tcst-tool[data-tcst-legacy="1"] .ro-pick span,
.tcst-tool[data-tcst-legacy="1"] .ro-note,
.tcst-tool[data-tcst-legacy="1"] .ro-details dd {
	min-width: 0;
	overflow-wrap: anywhere;
}

.tcst-tool[data-tcst-legacy="1"] .ro-badge,
.tcst-tool[data-tcst-legacy="1"] .tcst-badge {
	flex: 0 0 auto;
	margin-left: 0;
	white-space: nowrap;
}


/* -------------------------------------------------- legacy form breathing room */

/*
 * The host page lays these out; these two declarations only adjust the spacing
 * within that layout. The homepage card puts the field and button side by side
 * with a 10px gap, which is tight for a 26px-padded button, and the field's
 * 220px flex-basis makes them wrap to two rows earlier than they need to.
 */
.tcst-tool[data-tcst-legacy="1"] form {
	gap: 14px;
}

.tcst-tool[data-tcst-legacy="1"] form > input {
	flex: 1 1 12rem;
}


/* ------------------------------------------------- legacy skin, compaction */

/*
 * Keep the field and button on one row.
 *
 * The host forms are flex with wrap, and a grow-able field plus a wide button was
 * tipping over into two rows on cards that had room for one. min-width:0 lets the
 * field shrink instead of forcing the wrap.
 */
@media (min-width: 621px) {
	.tcst-tool[data-tcst-legacy="1"] form {
		flex-wrap: nowrap;
	}

	.tcst-tool[data-tcst-legacy="1"] form > input {
		flex: 1 1 auto;
		min-width: 0;
	}
}

@media (max-width: 620px) {
	.tcst-tool[data-tcst-legacy="1"] form { flex-wrap: wrap; }
	.tcst-tool[data-tcst-legacy="1"] form > input { flex: 1 1 100%; }
	.tcst-tool[data-tcst-legacy="1"] form > button { width: 100%; }
}

/*
 * The host page already draws the result panel, so ours stops drawing a second
 * one on top of it — otherwise a card sits inside a card.
 */
.tcst-tool[data-tcst-legacy="1"] .tcst-card {
	/*
	 * Self-contained panel. It previously borrowed the host page's .tcs-card and
	 * ended up inheriting a heading margin, a pill margin and a button margin that
	 * were written for the old plugin's markup — roughly 28px of gap arriving from
	 * a stylesheet this file cannot see. The tokens below are the same values the
	 * pages use, so the panel looks identical and now answers to one stylesheet.
	 */
	margin-top: 14px;
	padding: 12px 14px;
	background: var(--tcst-soft);
	border: 1px solid var(--tcst-line);
	border-radius: 12px;
	box-shadow: none;
}

/* A result rendered inside the page's own card is one tight block, not a stack
   of separated sections, so the dividing rules and panels come off. */
.tcst-tool[data-tcst-legacy="1"] .tcst-block {
	margin-top: 8px;
	padding-top: 6px;
}

/* The action needs no panel of its own inside a result that already has one. */
.tcst-tool[data-tcst-legacy="1"] .tcst-block--cta {
	background: none;
	border: 0;
	border-radius: 0;
	padding: 0;
	margin-top: 8px;
}

.tcst-tool[data-tcst-legacy="1"] .tcst-card__topline { margin-bottom: 0; }
.tcst-tool[data-tcst-legacy="1"] .tcst-card__title { font-size: 1.1rem; }
.tcst-tool[data-tcst-legacy="1"] .tcst-pill { padding: 4px 11px; font-size: .78rem; }
.tcst-tool[data-tcst-legacy="1"] .tcst-block__title { font-size: .95rem; }

/* The explanation sits below the action, and its own margin is bottom-only. */
.tcst-tool[data-tcst-legacy="1"] .tcst-card__reason {
	font-size: .88rem;
	line-height: 1.5;
	margin-bottom: 4px;
}
.tcst-tool[data-tcst-legacy="1"] .tcst-block--cta + .tcst-card__reason { margin-top: 10px; }

.tcst-tool[data-tcst-legacy="1"] .tcst-details { margin-top: 0; }
.tcst-tool[data-tcst-legacy="1"] .tcst-details__summary { font-size: .85rem; }

/* A button inside a result is secondary to the search button above it. */
.tcst-tool[data-tcst-legacy="1"] a.tcst-tool__btn {
	padding: 10px 20px !important;
	font-size: .95rem !important;
}