/*
 * The customer inventory.
 *
 * Direction: this is not a form, it is a walk along a route someone already
 * started with you. The signature is the thread down the left edge — nodes for
 * the parts of your situation, filled behind you, a ring where you stand, and a
 * dashed tail ahead that deliberately does not promise a number. The route is
 * adaptive; pretending to know "question 37 of 124" would be a lie, and a
 * discouraging one.
 *
 * Everything else stays quiet so the thread and the question carry the screen.
 * All colour derives from a single accent variable, so the whole interface
 * re-skins from one setting without losing its character.
 */

.hi-app {
	font-family: var(--hi-sans);
	color: var(--hi-ink);
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
	padding: clamp(0px, 3vw, 40px) 0;
}
.hi-app *, .hi-app *::before, .hi-app *::after { box-sizing: border-box; }
.hi-app button { font-family: inherit; cursor: pointer; }
.hi-app :focus-visible { outline: 2px solid var(--hi-accent); outline-offset: 3px; }

/* ---------------------------------------------------------------- shell */

.hi-shell {
	max-width: 480px;
	margin: 0 auto;
	background: var(--hi-surface);
	border: 1px solid var(--hi-line-soft);
	border-radius: var(--hi-r-shell);
	box-shadow: 0 1px 2px rgba(16, 26, 21, .04), 0 30px 70px -40px rgba(16, 26, 21, .45);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	min-height: 660px;
}

.hi-brandbar {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 18px 22px 14px;
	border-bottom: 1px solid var(--hi-line-soft);
}
.hi-logo { max-height: var(--hi-logo-h, 30px); max-width: 240px; width: auto; display: block; }
.hi-logo--text {
	font-family: var(--hi-display);
	font-size: 15px;
	font-weight: 650;
	letter-spacing: -.02em;
	max-width: none;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.hi-kicker {
	margin-left: auto;
	font-size: 12.5px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--hi-ink-3);
}

/* --------------------------------------------------------------- stage */

.hi-stage { display: grid; grid-template-columns: 46px minmax(0, 1fr); flex: 1; }

/* the thread */
.hi-thread { position: relative; padding: 26px 0 30px; }
.hi-thread ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; height: 100%; }
.hi-thread li { flex: 1; position: relative; min-height: 34px; }
.hi-thread li::before {
	content: "";
	position: absolute;
	left: 50%;
	top: 7px;
	bottom: -7px;
	width: 2px;
	margin-left: -1px;
	background: var(--hi-line);
	border-radius: 2px;
}
.hi-thread li:last-child::before { display: none; }
.hi-thread li.is-done::before { background: var(--hi-accent); }
.hi-thread li.is-now::before { background: linear-gradient(to bottom, var(--hi-accent) 42%, var(--hi-line) 42%); }
/* Ahead of you the route is not yet decided. The line says so. */
.hi-thread li.is-ahead::before {
	background: repeating-linear-gradient(to bottom, var(--hi-line) 0 4px, transparent 4px 9px);
}
.hi-thread li.is-ahead i { border-color: var(--hi-line); }
.hi-thread i {
	position: absolute;
	left: 50%;
	top: 0;
	width: 11px;
	height: 11px;
	margin-left: -5.5px;
	border-radius: 50%;
	background: var(--hi-surface);
	border: 2px solid var(--hi-accent-line);
	transition: background .35s ease, border-color .35s ease, transform .35s ease, box-shadow .35s ease;
}
.hi-thread li.is-done i { background: var(--hi-accent); border-color: var(--hi-accent); }
.hi-thread li.is-now i {
	border-color: var(--hi-accent);
	transform: scale(1.3);
	box-shadow: 0 0 0 5px var(--hi-accent-soft);
}
.hi-thread li.is-now i::after {
	content: "";
	position: absolute;
	inset: 2px;
	border-radius: 50%;
	background: var(--hi-accent);
}

/* the panel */
.hi-panel { display: flex; flex-direction: column; padding: 22px 24px 26px 6px; min-width: 0; }
/*
 * De kop draagt drie dingen: terug, waar u bent, en of het is opgeslagen.
 * Sinds de fase ook het deelnummer noemt past dat niet meer op één regel, en
 * dan breken ze rommelig door elkaar. De fase krijgt daarom een eigen regel
 * onder de andere twee — het leest als een bovenkopje boven de vraag, wat het
 * ook is.
 */
.hi-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.hi-head .hi-phase-name { order: 3; flex: 1 0 100%; margin-top: 2px; }
.hi-phase-name { font-size: 13px; letter-spacing: .13em; text-transform: uppercase; color: var(--hi-accent); font-weight: 600; }
.hi-saved { font-size: 13px; color: var(--hi-ink-3); }
.hi-saved.is-saving { color: var(--hi-accent); }

.hi-body { display: flex; flex-direction: column; flex: 1; }
.hi-body > * { animation: hi-rise .26s cubic-bezier(.2, .7, .3, 1) both; }
@keyframes hi-rise { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } }

/*
 * Functionele tekst blijft leesbaar.
 *
 * Metadata stond op 10,5 en 11 pixels. Op een groot scherm is dat fraai en
 * subtiel, maar dit product is voor mensen van alle leeftijden die een
 * hypotheek afsluiten. Statusinformatie die u moet kunnen lezen hoort niet
 * kleiner te zijn dan waar u comfortabel bij blijft.
 */

/* --------------------------------------------------------------- type */

.hi-q {
	font-family: var(--hi-display);
	font-size: clamp(23px, 5.6vw, 27px);
	line-height: 1.15;
	letter-spacing: -.03em;
	font-weight: 650;
	margin: 10px 0 0;
	text-wrap: balance;
}
.hi-sub { color: var(--hi-ink-2); font-size: 15px; margin: 11px 0 0; line-height: 1.5; }
.hi-tag {
	display: inline-block;
	align-self: flex-start;
	font-size: 12.5px;
	letter-spacing: .12em;
	text-transform: uppercase;
	font-weight: 600;
	color: var(--hi-accent);
	background: var(--hi-accent-soft);
	border-radius: var(--hi-r-control);
	padding: 5px 10px;
}

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

.hi-choice {
	position: relative;
	display: block;
	width: 100%;
	text-align: left;
	border: 1px solid var(--hi-line);
	background: var(--hi-surface);
	border-radius: var(--hi-r-card);
	padding: 15px 44px 15px 16px;
	font-size: 16.5px;
	line-height: 1.3;
	color: var(--hi-ink);
	transition: border-color .16s, background .16s, transform .16s;
}
.hi-choice::after {
	content: "";
	position: absolute;
	right: 16px;
	top: 50%;
	width: 16px;
	height: 16px;
	margin-top: -8px;
	border-radius: 50%;
	border: 1.5px solid var(--hi-line);
	transition: border-color .16s, background .16s;
}
.hi-choice:hover { border-color: var(--hi-accent-line); background: var(--hi-accent-soft); transform: translateX(2px); }
.hi-choice:hover::after { border-color: var(--hi-accent-line); }
.hi-choice[aria-pressed="true"] {
	border-color: var(--hi-accent);
	background: var(--hi-accent-soft);
	color: var(--hi-accent-deep);
}
.hi-choice[aria-pressed="true"]::after {
	background: var(--hi-accent);
	border-color: var(--hi-accent);
	box-shadow: inset 0 0 0 2px var(--hi-surface);
}
.hi-choice.quiet { border-style: dashed; color: var(--hi-ink-2); font-size: 15.5px; }

.hi-choices { display: flex; flex-direction: column; gap: 8px; margin-top: 20px; }

/* multi-select keeps a real checkbox, hidden but focusable */
.hi-checkable { cursor: pointer; }
.hi-checkable input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.hi-checkable:has(input:checked) {
	border-color: var(--hi-accent);
	background: var(--hi-accent-soft);
	color: var(--hi-accent-deep);
}
.hi-checkable:has(input:checked)::after {
	background: var(--hi-accent);
	border-color: var(--hi-accent);
	box-shadow: inset 0 0 0 2px var(--hi-surface);
}
.hi-checkable:has(input:focus-visible) { outline: 2px solid var(--hi-accent); outline-offset: 3px; }

/* ------------------------------------------------------------- inputs */

.hi-amount { margin-top: 20px; }
.hi-amount input {
	width: 100%;
	border: 1px solid var(--hi-line);
	border-radius: var(--hi-r-card);
	padding: 17px 18px;
	font-family: var(--hi-display);
	font-size: 24px;
	font-weight: 650;
	letter-spacing: -.02em;
	background: var(--hi-surface);
	color: var(--hi-ink);
}
.hi-amount input:focus { border-color: var(--hi-accent); }
.hi-chips { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 11px; }
.hi-chip {
	border: 1px solid var(--hi-line);
	background: transparent;
	border-radius: var(--hi-r-control);
	padding: 9px 14px;
	font-size: 14.5px;
	color: var(--hi-ink-2);
	transition: .14s;
}
.hi-chip:hover { border-color: var(--hi-accent); color: var(--hi-accent); background: var(--hi-accent-soft); }
.hi-text {
	width: 100%;
	min-height: 110px;
	margin-top: 18px;
	border: 1px solid var(--hi-line);
	border-radius: var(--hi-r-card);
	padding: 15px;
	font-family: inherit;
	font-size: 15.5px;
	line-height: 1.5;
	background: var(--hi-surface);
	color: var(--hi-ink);
	resize: vertical;
}
.hi-text:focus { border-color: var(--hi-accent); }

/* ------------------------------------------------------------ actions */

.hi-foot { margin-top: auto; padding-top: 22px; display: flex; flex-direction: column; gap: 9px; }
.hi-primary, .hi-secondary {
	display: block;
	width: 100%;
	border: 0;
	border-radius: var(--hi-r-card);
	padding: 16px;
	font-size: 16.5px;
	font-weight: 600;
	text-align: center;
	text-decoration: none;
	transition: .16s;
}
.hi-primary { background: var(--hi-accent); color: #fff; }
.hi-primary:hover { background: var(--hi-accent-deep); color: #fff; }
.hi-primary:disabled { opacity: .35; cursor: not-allowed; }
.hi-secondary { background: transparent; border: 1px solid var(--hi-line); color: var(--hi-ink); font-weight: 500; }
.hi-secondary:hover { background: var(--hi-accent-soft); border-color: var(--hi-accent-line); color: var(--hi-ink); }

/* Always a way past a question. Quiet, but never hidden. */
.hi-defer {
	margin-top: 16px;
	width: 100%;
	border: 0;
	background: transparent;
	color: var(--hi-ink-3);
	font-size: 14.5px;
	padding: 10px;
	text-decoration: underline;
	text-underline-offset: 3px;
}
.hi-defer:hover { color: var(--hi-accent); }

/* ------------------------------------------------------------ moments */

.hi-feedback {
	margin-top: 16px;
	background: var(--hi-accent-soft);
	color: var(--hi-accent-deep);
	border-radius: var(--hi-r-card);
	padding: 14px 16px;
	font-size: 15px;
	line-height: 1.45;
}
.hi-error {
	margin-top: 14px;
	background: #F6E7EC;
	color: #8B2F52;
	border-radius: var(--hi-r-card);
	padding: 13px 15px;
	font-size: 14.5px;
}
.hi-privacy {
	margin-top: 12px;
	background: #F6E7EC;
	color: #8B2F52;
	border-radius: var(--hi-r-card);
	padding: 12px 14px;
	font-size: 14px;
}

/* ------------------------------------------------------------- bundle */

.hi-bundle { list-style: none; margin: 18px 0 0; padding: 0; }
.hi-bundle li {
	display: flex;
	gap: 12px;
	align-items: center;
	padding: 13px 14px;
	font-size: 15.5px;
	background: var(--hi-accent-soft);
	border-radius: var(--hi-r-card);
	margin-bottom: 7px;
	line-height: 1.35;
}
.hi-bundle li .fx { color: var(--hi-accent); font-size: 13px; flex: none; }
.hi-bundle .fix {
	flex: none;
	border: 1px solid transparent;
	background: var(--hi-surface);
	border-radius: var(--hi-r-control);
	padding: 6px 11px;
	font-size: 12.5px;
	color: var(--hi-ink-2);
}
.hi-bundle .fix:hover { border-color: #C9A0B2; color: #8B2F52; }
.hi-bundle li.is-wrong { background: #F6E7EC; color: #8B2F52; }
.hi-bundle li.is-wrong .fx { color: #8B2F52; }

/* -------------------------------------------------------------- cover */

.hi-cover-lede { font-size: 16px; color: var(--hi-ink-2); margin: 13px 0 0; line-height: 1.5; }
.hi-facts { display: flex; flex-direction: column; margin-top: 22px; }
.hi-fact {
	display: flex;
	gap: 14px;
	align-items: baseline;
	padding: 11px 0;
	border-top: 1px solid var(--hi-line-soft);
	font-size: 14.5px;
	color: var(--hi-ink-2);
}
.hi-fact b { font-weight: 600; color: var(--hi-ink); flex: none; min-width: 96px; }

/* -------------------------------------------------------- closing bits */

.hi-summary { border-top: 1px solid var(--hi-line-soft); padding: 13px 0; }
.hi-summary .k { font-size: 12.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--hi-ink-3); font-weight: 600; }
.hi-summary .v { font-size: 15.5px; margin-top: 4px; line-height: 1.4; }
.hi-declaration {
	background: var(--hi-canvas);
	border-radius: var(--hi-r-card);
	padding: 17px;
	font-size: 15px;
	color: var(--hi-ink-2);
	margin-top: 18px;
	line-height: 1.5;
}
.hi-docs { list-style: none; padding: 0; margin: 18px 0 0; }
.hi-docs li {
	display: flex;
	gap: 11px;
	align-items: center;
	padding: 13px 0;
	border-bottom: 1px solid var(--hi-line-soft);
	font-size: 15.5px;
}
.hi-docs li::before {
	content: "";
	width: 7px;
	height: 7px;
	border-radius: 2px;
	background: var(--hi-accent-line);
	flex: none;
}

/* ------------------------------------------------------------ adviser */

.hi-adviser {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px 22px;
	border-top: 1px solid var(--hi-line-soft);
	background: var(--hi-canvas);
}
.hi-avatar {
	width: 38px;
	height: 38px;
	border-radius: 50%;
	flex: none;
	object-fit: cover;
	display: grid;
	place-items: center;
	background: var(--hi-accent);
	color: #fff;
	font-size: 13px;
	font-weight: 650;
}
.hi-adviser-who { min-width: 0; line-height: 1.3; }
.hi-adviser-who b { display: block; font-size: 14px; font-weight: 600; }
.hi-adviser-who span { font-size: 12.5px; color: var(--hi-ink-3); }
.hi-ask {
	margin-left: auto;
	flex: none;
	border: 1px solid var(--hi-line);
	background: var(--hi-surface);
	border-radius: var(--hi-r-control);
	padding: 9px 14px;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--hi-ink);
	text-decoration: none;
}
.hi-ask:hover { border-color: var(--hi-accent); color: var(--hi-accent); }

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

.hi-helpblock {
	margin-top: 24px;
	border: 1px solid var(--hi-line-soft);
	border-radius: var(--hi-r-card);
	padding: 15px 16px;
	display: flex;
	flex-direction: column;
	gap: 9px;
}
.hi-helpblock b { font-size: 14.5px; font-weight: 600; }
.hi-helpblock small { font-size: 12.5px; color: var(--hi-ink-3); line-height: 1.5; }
.hi-contact { display: flex; gap: 8px; flex-wrap: wrap; }
.hi-contact a {
	border: 1px solid var(--hi-line);
	border-radius: var(--hi-r-control);
	padding: 8px 13px;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--hi-ink);
	text-decoration: none;
}
.hi-contact a:hover { border-color: var(--hi-accent); color: var(--hi-accent); }

/* -------------------------------------------------------------- sheet */

.hi-sheet-bg {
	position: fixed;
	inset: 0;
	background: rgba(16, 26, 21, .45);
	z-index: 9999;
	display: none;
	align-items: flex-end;
	justify-content: center;
}
.hi-sheet-bg.open { display: flex; animation: hi-fade .2s both; }
@keyframes hi-fade { from { opacity: 0; } to { opacity: 1; } }
.hi-sheet {
	background: var(--hi-surface);
	border-radius: var(--hi-r-shell) var(--hi-r-shell) 0 0;
	padding: 24px 24px 30px;
	width: 100%;
	max-width: 480px;
	animation: hi-up .24s cubic-bezier(.2, .7, .3, 1) both;
}
@keyframes hi-up { from { transform: translateY(26px); } to { transform: none; } }
.hi-sheet h3 { font-family: var(--hi-display); font-size: 21px; margin: 0; letter-spacing: -.025em; }
.hi-sheet p { color: var(--hi-ink-2); font-size: 15px; margin: 9px 0 0; }
.hi-sheet .ctx { background: var(--hi-canvas); border-radius: var(--hi-r-card); padding: 14px; margin: 15px 0 4px; font-size: 14.5px; color: var(--hi-ink-2); }
.hi-sheet .pv { font-size: 12px; color: var(--hi-ink-3); margin-top: 15px; line-height: 1.6; }
.hi-sheet .hi-primary, .hi-sheet .hi-secondary { margin-top: 10px; }

/* ---------------------------------------------------------- fallbacks */

.hi-serverform { margin: 0; }
.hi-choices .hi-serverform + .hi-serverform { margin-top: 8px; }
.hi-foot .hi-serverform { display: block; }
.hi-bundle .hi-serverform { margin-left: auto; }
.hi-boot { padding: 50px 24px; text-align: center; color: var(--hi-ink-3); }
.hi-app--message .hi-shell { padding: 44px 30px; min-height: 0; display: block; }
.hi-app--message h1 { font-family: var(--hi-display); font-size: 25px; letter-spacing: -.025em; margin: 0 0 12px; }
.hi-app--message p { color: var(--hi-ink-2); margin: 0 0 18px; }

/* --------------------------------------------------------- responsive */

@media (max-width: 540px) {
	.hi-app { padding: 0; }
	.hi-shell { border-radius: 0; border-left: 0; border-right: 0; box-shadow: none; min-height: 100vh; min-height: 100dvh; }
	.hi-stage { grid-template-columns: 34px minmax(0, 1fr); }
	.hi-panel { padding: 20px 18px 22px 2px; }
	.hi-brandbar { padding: 15px 18px 12px; }
	.hi-adviser { padding: 12px 18px; }
}

@media (prefers-reduced-motion: reduce) {
	.hi-app *, .hi-app *::before, .hi-app *::after {
		animation-duration: .001ms !important;
		transition-duration: .001ms !important;
	}
}

/* Back control, only present when scripting can actually step backwards. */
.hi-stepback {
	border: 0;
	background: transparent;
	color: var(--hi-ink-3);
	font-size: 12.5px;
	padding: 0 10px 0 0;
	margin-right: auto;
}
.hi-stepback:hover { color: var(--hi-accent); }
.hi-head { align-items: center; }

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	white-space: nowrap;
}

/* ------------------------------------------------------------------ */
/* authorisation                                                       */
/* ------------------------------------------------------------------ */

.hi-agree {
	display: flex;
	gap: 13px;
	align-items: flex-start;
	margin-top: 20px;
	padding: 16px;
	border: 1px solid var(--hi-line);
	border-radius: var(--hi-r-card);
	font-size: 15px;
	line-height: 1.45;
	cursor: pointer;
	transition: border-color .16s, background .16s;
}
.hi-agree:has(input:checked) { border-color: var(--hi-accent); background: var(--hi-accent-soft); }
.hi-agree input { width: 22px; height: 22px; flex: none; margin: 0; accent-color: var(--hi-accent); }
.hi-agree:has(input:focus-visible) { outline: 2px solid var(--hi-accent); outline-offset: 3px; }

.hi-f-inline { display: block; margin-top: 16px; }
.hi-f-inline > span { display: block; font-size: 13.5px; font-weight: 600; margin-bottom: 7px; }
.hi-f-inline input {
	width: 100%;
	border: 1px solid var(--hi-line);
	border-radius: var(--hi-r-card);
	padding: 15px 16px;
	font-family: var(--hi-display);
	font-size: 18px;
	background: var(--hi-surface);
	color: var(--hi-ink);
}
.hi-f-inline input:focus { border-color: var(--hi-accent); }

.hi-evidence {
	margin-top: 18px;
	padding: 15px 16px;
	background: var(--hi-canvas);
	border-radius: var(--hi-r-card);
	display: flex;
	flex-direction: column;
	gap: 7px;
}
.hi-evidence b { font-size: 13.5px; font-weight: 600; }
.hi-evidence span { font-size: 13px; color: var(--hi-ink-2); line-height: 1.5; }
.hi-evidence code {
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 13px;
	color: var(--hi-ink-3);
	word-break: break-all;
	line-height: 1.6;
}

/* ------------------------------------------------------------------ */
/* explanation, folded away                                            */
/*                                                                     */
/* Closed it is one quiet line, so the people who do not need it read   */
/* straight past. Open it explains why we ask — and offers the adviser, */
/* because some questions are not answered by an explanation.           */
/* ------------------------------------------------------------------ */

.hi-explain { margin-top: 14px; border-top: 1px solid var(--hi-line-soft); }
.hi-explain summary {
	display: flex;
	align-items: center;
	gap: 9px;
	padding: 12px 2px;
	font-size: 14.5px;
	font-weight: 600;
	color: var(--hi-accent);
	cursor: pointer;
	list-style: none;
	min-height: 44px;
}
.hi-explain summary::-webkit-details-marker { display: none; }
.hi-explain summary::before {
	content: "";
	width: 9px;
	height: 9px;
	flex: none;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg) translate(-2px, -2px);
	transition: transform .2s ease;
}
.hi-explain[open] summary::before { transform: rotate(-135deg) translate(-2px, -2px); }
.hi-explain summary:hover { color: var(--hi-accent-deep); }
.hi-explain summary:focus-visible { outline: 2px solid var(--hi-accent); outline-offset: 2px; }

.hi-explain-body { padding: 2px 2px 16px; animation: hi-rise .2s ease both; }
.hi-explain-body p {
	margin: 0 0 14px;
	font-size: 15px;
	line-height: 1.55;
	color: var(--hi-ink-2);
}
.hi-explain-ask {
	background: var(--hi-canvas);
	border-radius: var(--hi-r-card);
	padding: 14px 15px;
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.hi-explain-ask b { font-size: 14px; font-weight: 600; }
.hi-explain-ask > span { font-size: 13px; color: var(--hi-ink-3); line-height: 1.45; margin-bottom: 6px; }
.hi-explain-ask .hi-contact a { background: var(--hi-surface); }

/* ==================================================================== */
/* Coming back, looking back, stopping                                  */
/*                                                                      */
/* Three things a long route on a phone needs and rarely has: a moment   */
/* of recognition when you return, a way back to one specific answer     */
/* instead of stepping back forty screens, and permission to stop.       */
/* ==================================================================== */

.hi-pause {
	margin-left: auto;
	margin-right: 12px;
	font-size: 12.5px;
	color: var(--hi-ink-3);
	text-decoration: none;
	padding: 6px 0;
}
.hi-pause:hover { color: var(--hi-accent); text-decoration: underline; }
.hi-changing {
	background: var(--hi-accent-soft);
	color: var(--hi-accent-deep);
	border-radius: var(--hi-r-card);
	padding: 11px 14px;
	font-size: 14px;
}

/* the current phase fills as you move through it */
.hi-thread li.is-now::before {
	background: linear-gradient(to bottom, var(--hi-accent) var(--fill, 42%), var(--hi-line) var(--fill, 42%));
}

/* overview */
.hi-ov-group { margin-top: 22px; }
.hi-ov-group h2 {
	font-size: 13px;
	letter-spacing: .13em;
	text-transform: uppercase;
	color: var(--hi-accent);
	font-weight: 600;
	margin: 0 0 8px;
}
.hi-overview { list-style: none; margin: 0; padding: 0; }
.hi-overview li {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 4px 12px;
	padding: 12px 0;
	border-bottom: 1px solid var(--hi-line-soft);
	align-items: baseline;
}
.hi-ov-q { font-size: 14px; color: var(--hi-ink-3); grid-column: 1; }
.hi-ov-a { font-size: 16px; grid-column: 1; grid-row: 2; }
.hi-overview a {
	grid-column: 2;
	grid-row: 1 / span 2;
	align-self: center;
	border: 1px solid var(--hi-line);
	border-radius: var(--hi-r-control);
	padding: 9px 14px;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--hi-ink);
	text-decoration: none;
	white-space: nowrap;
}
.hi-overview a:hover { border-color: var(--hi-accent); color: var(--hi-accent); }
.hi-overview li.is-deferred .hi-ov-a { color: var(--hi-amber); }

/* pause */
.hi-linkbox {
	margin-top: 20px;
	padding: 15px 16px;
	background: var(--hi-canvas);
	border-radius: var(--hi-r-card);
	display: flex;
	flex-direction: column;
	gap: 9px;
}
.hi-linkbox > span { font-size: 13px; font-weight: 600; }
.hi-linkbox input {
	width: 100%;
	border: 1px solid var(--hi-line);
	border-radius: var(--hi-r-control);
	padding: 11px 12px;
	font-size: 13px;
	background: var(--hi-surface);
	color: var(--hi-ink-2);
}
.hi-linkbox .hi-secondary { padding: 12px; font-size: 15px; }

/* ==================================================================== */
/* Phone details                                                        */
/* ==================================================================== */

@media (max-width: 540px) {
	/* The action stays within thumb reach even when the options run long. */
	.hi-foot {
		position: sticky;
		bottom: 0;
		background: linear-gradient(to bottom, rgba(255,255,255,0), var(--hi-surface) 22%);
		padding-bottom: max(14px, env(safe-area-inset-bottom));
		margin-left: -18px;
		margin-right: -18px;
		padding-left: 18px;
		padding-right: 18px;
		z-index: 2;
	}
	.hi-adviser { padding-bottom: max(12px, env(safe-area-inset-bottom)); }
	.hi-overview li { grid-template-columns: minmax(0, 1fr) auto; }
	.hi-choice { padding-top: 16px; padding-bottom: 16px; }
	.hi-chip { padding: 11px 15px; }
}

/* iOS zooms in on any input under 16px on focus. Nothing here is. */
.hi-app input, .hi-app textarea, .hi-app select { font-size: max(16px, 1em); }

.hi-saved.is-ok { color: var(--hi-accent); font-weight: 600; }
.hi-saved.is-ok::before { content: "✓ "; }

/* ==================================================================== */
/* The gate                                                             */
/*                                                                      */
/* Only shown when the practice hands out a code through a channel other */
/* than the link. Kept short and calm: a wall at the front door is where */
/* people give up, so the way to reach the adviser sits right under it.  */
/* ==================================================================== */

.hi-shell--gate { min-height: 0; }
.hi-panel--gate { padding: 26px 24px 28px; }
.hi-code {
	width: 100%;
	margin-top: 22px;
	border: 1px solid var(--hi-line);
	border-radius: var(--hi-r-card);
	padding: 18px 16px;
	font-family: var(--hi-display);
	font-size: 32px;
	font-weight: 650;
	letter-spacing: .34em;
	text-align: center;
	background: var(--hi-surface);
	color: var(--hi-ink);
}
.hi-code:focus { border-color: var(--hi-accent); outline: none; box-shadow: 0 0 0 4px var(--hi-accent-soft); }
.hi-code::placeholder { color: var(--hi-line); letter-spacing: .34em; }
.hi-shell--gate .hi-foot { padding-top: 16px; }
.hi-shell--gate .hi-helpblock { margin-top: 20px; }

/* Filling it in together: visible, so nobody is misled about who is typing. */
.hi-together {
	display: flex;
	flex-direction: column;
	gap: 3px;
	padding: 11px 14px;
	margin-bottom: 4px;
	background: var(--hi-canvas);
	border-radius: var(--hi-r-card);
	border-left: 3px solid var(--hi-accent);
}
.hi-together b { font-size: 12.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--hi-accent); }
.hi-together span { font-size: 13px; color: var(--hi-ink-2); line-height: 1.45; }

/* Read aloud. Hidden until the browser confirms it can speak Dutch. */
.hi-readaloud {
	align-self: flex-start;
	margin-top: 14px;
	border: 1px solid var(--hi-line);
	background: var(--hi-surface);
	border-radius: var(--hi-r-control);
	padding: 10px 15px;
	font-size: 14.5px;
	font-weight: 600;
	color: var(--hi-ink-2);
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
}
.hi-readaloud:hover { border-color: var(--hi-accent); color: var(--hi-accent); }
.hi-readaloud.is-speaking { border-color: var(--hi-accent); background: var(--hi-accent-soft); color: var(--hi-accent-deep); }
.hi-readaloud.is-speaking::after { content: " — stoppen"; font-weight: 500; }

.hi-hint { font-size: 13.5px; color: var(--hi-ink-3); margin: 0 0 4px; }

/* ==================================================================== */
/* The adviser as a person                                              */
/*                                                                      */
/* Shown where someone is deciding whether to start, whether to come     */
/* back, or whether to ask. A face and two sentences in their own voice  */
/* lower the threshold to ask far more than a phone number does.         */
/* ==================================================================== */

.hi-advisercard {
	margin-top: 22px;
	padding: 18px;
	background: var(--hi-canvas);
	border-radius: var(--hi-r-card);
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.hi-advisercard-top { display: flex; align-items: center; gap: 14px; }
.hi-portrait {
	width: 60px;
	height: 60px;
	border-radius: 50%;
	flex: none;
	object-fit: cover;
	background: var(--hi-accent);
	box-shadow: 0 0 0 3px var(--hi-surface);
}
.hi-portrait--initials {
	display: grid;
	place-items: center;
	color: #fff;
	font-size: 20px;
	font-weight: 650;
	font-family: var(--hi-display);
}
.hi-advisercard-top div { min-width: 0; line-height: 1.3; }
.hi-advisercard-top b { display: block; font-family: var(--hi-display); font-size: 18px; font-weight: 650; letter-spacing: -.02em; }
.hi-advisercard-top span { font-size: 13.5px; color: var(--hi-ink-3); }
.hi-advisercard-intro { margin: 0; font-size: 15px; color: var(--hi-ink); line-height: 1.5; }
.hi-advisercard-bio {
	margin: 0;
	font-size: 14.5px;
	color: var(--hi-ink-2);
	line-height: 1.55;
	font-style: italic;
	border-left: 2px solid var(--hi-accent-line);
	padding-left: 13px;
}
.hi-advisercard .hi-contact a { background: var(--hi-surface); min-height: 44px; display: inline-flex; align-items: center; }

/* Read-only view of what the other partner filled in. */
.hi-overview--read li { grid-template-columns: minmax(0, 1fr); }
.hi-overview--read .hi-ov-a { grid-row: auto; }
.hi-foot .hi-text { margin-top: 0; margin-bottom: 8px; }

.hi-uitleglink { margin-top: 16px; font-size: 14.5px; }
.hi-uitleglink a { color: var(--hi-accent); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

/* ==================================================================== */
/* Voor wie is deze vraag                                               */
/*                                                                      */
/* Bij een stel wisselt dit per vraag, en wie het mist beantwoordt       */
/* vragen over de ander. Dat is de belangrijkste informatie op het       */
/* scherm, dus geen klein label maar een regel die u niet over het       */
/* hoofd ziet.                                                          */
/* ==================================================================== */

.hi-voorwie {
	display: flex;
	align-items: center;
	gap: 11px;
	background: var(--hi-accent-soft);
	border-radius: var(--hi-r-card);
	padding: 11px 14px;
	margin-bottom: 4px;
	align-self: stretch;
}
.hi-voorwie-bol {
	width: 30px;
	height: 30px;
	flex: none;
	border-radius: 50%;
	background: var(--hi-accent);
	color: #fff;
	display: grid;
	place-items: center;
	font-family: var(--hi-display);
	font-size: 14px;
	font-weight: 700;
}
.hi-voorwie > span:last-child {
	font-size: 15px;
	color: var(--hi-accent-deep);
	line-height: 1.3;
}
.hi-voorwie b { font-weight: 700; }