/* Account page on kwazi.eu ([kwazi_hub_account]); design: docs/specs/kwazi-hub-accounts.md → Ontwerp. */
.kh {
	--kh-ink: #090909;
	--kh-text: #2a2a2a;
	--kh-mute: #4a4a4a;
	--kh-line: #c3c3c3;
	--kh-soft: #f6ffee;
	--kh-orange: #de7a37;
	--kh-orange-hover: #c9682a;
	--kh-accent: #a9541c;
	--kh-peach: #fff1e6;
	--kh-ok: #2f6b1f;
	--kh-error: #b42318;
	box-sizing: border-box;
	container: kh / inline-size;
	max-width: 1200px;
	margin: 0 auto;
	padding: 32px 0 64px;
	color: var(--kh-ink);
	font-family: Montserrat, system-ui, sans-serif;
	font-size: 15px;
	line-height: 1.55;
}
.kh *, .kh *::before, .kh *::after { box-sizing: border-box; }
.kh h1, .kh h2.kh-h1 { margin: 0 0 8px; font-size: 32px; line-height: 1.2; font-weight: 800; color: var(--kh-ink); }
.kh h2 { margin: 0; font-size: 18px; line-height: 1.3; font-weight: 800; color: var(--kh-ink); }
.kh h3 { margin: 16px 0 8px; font-size: 15px; line-height: 1.3; font-weight: 800; color: var(--kh-ink); }
.kh p { margin: 0 0 12px; }
.kh a { color: var(--kh-accent); }
.kh a:hover { color: #7a3a11; }
.kh :focus-visible { outline: 3px solid var(--kh-ok); outline-offset: 2px; }
.kh-muted { color: var(--kh-mute); font-size: 14px; }
.kh-small, .kh-help { color: var(--kh-mute); font-size: 13px; }
.kh-help { margin: 6px 0 0; }
.kh-error { margin: 6px 0 0; color: var(--kh-error); font-size: 13px; font-weight: 600; }
.kh-ok { color: var(--kh-ok); font-weight: 600; font-size: 14px; }
.kh-center { text-align: center; }
.kh-ellipsis { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kh-label { display: block; font-size: 13px; font-weight: 700; color: #3d3d3d; }
.kh-ico { width: 18px; height: 18px; flex: none; }

/* Buttons */
.kh .kh-btn, .kh .kh-btn-2, .kh #wp-submit {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	min-height: 48px; padding: 0 24px; border-radius: 9999px;
	font: 700 15px/1 Montserrat, system-ui, sans-serif; text-decoration: none; cursor: pointer;
	transition: background .15s, border-color .15s;
}
.kh .kh-btn, .kh #wp-submit { border: 1px solid var(--kh-orange); background: var(--kh-orange); color: var(--kh-ink); }
.kh .kh-btn:hover, .kh #wp-submit:hover { background: var(--kh-orange-hover); border-color: var(--kh-orange-hover); color: var(--kh-ink); }
.kh .kh-btn-2 { border: 1px solid var(--kh-ink); background: #fff; color: var(--kh-ink); }
.kh .kh-btn-2:hover { background: var(--kh-soft); color: var(--kh-ink); }
.kh .kh-btn[disabled] { background: #ededed; border-color: #d0d0d0; color: #5e5e5e; cursor: not-allowed; }
.kh .kh-danger { border-color: var(--kh-error); color: var(--kh-error); }
.kh .kh-danger:hover { background: #fef3f2; color: #8f1c13; }
.kh-danger-text { color: var(--kh-error); }
.kh-wide, .kh #wp-submit { width: 100%; }
.kh-link { font-weight: 600; }
.kh-inline { display: inline; margin: 0; }
.kh-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 4px 0 12px; }

/* Cards */
.kh-card { background: #fff; border: 1px solid var(--kh-line); border-radius: 18px; padding: 24px; display: flex; flex-direction: column; gap: 10px; }
.kh-part > .kh-card + .kh-card { margin-top: 24px; }
.kh-panel { max-width: 500px; margin: 0 auto; padding: 32px; }
.kh-center-card { max-width: 540px; text-align: center; align-items: center; }
.kh-lead { color: #3d3d3d; }
.kh-icon { width: 64px; height: 64px; border-radius: 9999px; background: var(--kh-soft); color: var(--kh-orange); display: flex; align-items: center; justify-content: center; }
.kh-icon .kh-ico { width: 30px; height: 30px; }
.kh-row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 12px; align-items: baseline; }
.kh-badge { align-self: flex-start; display: inline-flex; align-items: center; min-height: 24px; padding: 0 10px; border-radius: 9999px; background: #f2f2f2; color: #3d3d3d; font-size: 12px; font-weight: 700; }
.kh-details { border-top: 1px solid #ededed; padding-top: 12px; }
.kh-details summary { cursor: pointer; font-weight: 700; font-size: 14px; min-height: 32px; }
.kh-details code { display: block; margin-top: 8px; padding: 10px 12px; background: #f2f2f2; border-radius: 8px; word-break: break-all; font-size: 12px; }
.kh-sep { border-top: 1px solid #ededed; padding-top: 12px; }

/* Notices */
.kh-notice { max-width: 720px; margin: 0 auto 24px; padding: 14px 18px; border-radius: 14px; background: #fff; font-weight: 600; font-size: 14px; }
.kh-notice-ok { border: 1px solid #84be51; }
.kh-notice-error { border: 1px solid var(--kh-error); color: #8f1c13; background: #fef3f2; }
.kh-alert { padding: 12px 16px; border-radius: 10px; background: #fef3f2; color: #8f1c13; font-weight: 600; font-size: 14px; }
.kh-banner { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center; justify-content: space-between; background: #fff4ec; border: 1px solid var(--kh-orange); border-radius: 14px; padding: 14px 18px; }
.kh-banner p { margin: 0; flex: 1 1 320px; font-weight: 600; font-size: 14px; }

/* Tabs and forms */
.kh-tabs { display: flex; gap: 4px; padding: 4px; background: #f2f2f2; border-radius: 9999px; margin-bottom: 24px; }
.kh-tab { flex: 1 1 0; display: flex; align-items: center; justify-content: center; min-height: 44px; border-radius: 9999px; font-weight: 700; font-size: 14px; color: #3d3d3d; text-decoration: none; }
.kh .kh-tab { color: #3d3d3d; text-decoration: none; }
.kh .kh-tab.is-on { background: #fff; color: var(--kh-ink); box-shadow: 0 1px 2px rgba(9, 9, 9, .12); }
.kh-form, .kh #loginform { display: flex; flex-direction: column; gap: 16px; margin: 0; }
.kh #loginform p { margin: 0; }
.kh-field label, .kh #loginform label { display: block; margin: 0 0 6px; font-weight: 700; font-size: 14px; }
.kh-field input, .kh #loginform input[type="text"], .kh #loginform input[type="password"] {
	width: 100%; min-height: 48px; padding: 0 16px; border: 1px solid #8a8a8a; border-radius: 10px; background: #fff;
	font: 500 15px Montserrat, system-ui, sans-serif; color: var(--kh-ink);
}
.kh-field input[aria-invalid="true"] { border: 2px solid var(--kh-error); }
.kh #loginform .login-remember label { display: flex; gap: 10px; align-items: center; font-weight: 500; }
.kh-checks { display: flex; flex-direction: column; gap: 12px; }
.kh-check { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; cursor: pointer; }
.kh-check input, .kh #loginform input[type="checkbox"] { width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--kh-ok); flex: none; }
.kh-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Field rows */
.kh-two, .kh-three { display: grid; gap: 16px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.kh-three { grid-template-columns: 1fr 2fr 1fr; }

/* Dashboard */
.kh-dash { display: flex; flex-wrap: wrap; gap: 28px; align-items: flex-start; }
.kh-nav { flex: 1 1 220px; max-width: 260px; background: #fff; border: 1px solid var(--kh-line); border-radius: 18px; padding: 12px; display: flex; flex-direction: column; gap: 2px; }
.kh-who { display: flex; align-items: center; gap: 12px; padding: 8px 8px 16px; margin-bottom: 8px; border-bottom: 1px solid #ededed; min-width: 0; }
.kh-who > span:last-child { min-width: 0; }
.kh-avatar { flex: none; width: 40px; height: 40px; border-radius: 9999px; background: var(--kh-soft); border: 1px solid #84be51; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 15px; color: #22501a; }
.kh .kh-side { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 0 12px; border-radius: 9999px; color: #3d3d3d; font-weight: 600; font-size: 14px; text-decoration: none; transition: background .15s, color .15s; }
.kh .kh-side .kh-ico { color: #8a8a8a; transition: color .15s; }
.kh .kh-side:hover { background: var(--kh-soft); color: var(--kh-ink); }
.kh .kh-side:hover .kh-ico, .kh .kh-side.is-on .kh-ico { color: var(--kh-orange); }
.kh .kh-side.is-on { background: var(--kh-peach); color: var(--kh-ink); font-weight: 700; }
.kh-out { border-top: 1px solid #ededed; margin-top: 8px; padding-top: 8px; }
.kh-page { flex: 999 1 560px; min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.kh-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; }

/* The width of the block, not the screen: a page builder may give it a narrow column. */
@container kh (max-width: 760px) {
	.kh h2.kh-h1 { font-size: 26px; }
	.kh-panel { padding: 22px 18px; border-radius: 16px; }
	.kh-card { padding: 18px; border-radius: 16px; }
	.kh-card .kh-btn, .kh-card .kh-btn-2, .kh-actions .kh-btn, .kh-actions .kh-btn-2 { width: 100%; }
	.kh-dash { gap: 16px; }
	.kh-nav { flex: 1 1 100%; max-width: none; flex-direction: row; overflow-x: auto; gap: 6px; padding: 6px; border-radius: 9999px; scrollbar-width: none; }
	.kh-nav::-webkit-scrollbar { display: none; }
	.kh-who { display: none; }
	.kh-out { border: 0; margin: 0; padding: 0; }
	.kh .kh-side { flex: none; white-space: nowrap; padding: 0 14px; }
	.kh-two, .kh-three { grid-template-columns: 1fr; }
}
.kh-left { text-align: left; align-self: stretch; }

/* Appointments and requests (A9). */
.kh-stack { display: flex; flex-direction: column; gap: 16px; }
.kh-answers { display: grid; grid-template-columns: minmax(120px, 220px) 1fr; gap: 6px 16px; margin: 8px 0 0; }
.kh-answers dd { margin: 0; overflow-wrap: anywhere; }
.kh-booking { margin: 0 0 12px; }
.kh-booking summary { cursor: pointer; width: fit-content; }
.kh-slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 8px; margin: 4px 0 16px; }
.kh-slots .kh-inline, .kh .kh-slots .kh-btn-2 { display: flex; width: 100%; min-height: 40px; padding: 0 8px; }
@container kh (max-width:760px) { .kh-answers { grid-template-columns: 1fr; } .kh-answers dd { margin-bottom: 8px; } }
.kh-card .kh-sep { display: flex; flex-direction: column; gap: 10px; padding-top: 16px; }
/* Requests as a list with filters (0.6.3). */
.kh-filters { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; margin: 0 0 16px; }
.kh-filters-search { grid-column: 1 / -1; display: flex; gap: 8px; }
.kh .kh-filters input[type="hidden"] { display: none; }
.kh .kh-filters select, .kh .kh-filters input[type="search"] { width: 100%; max-width: none; min-width: 0; min-height: 44px; margin: 0; padding: 0 12px; border: 1px solid var(--kh-line); border-radius: 10px; background-color: #fff; font: inherit; font-size: 14px; color: var(--kh-ink); }
.kh .kh-filters input[type="search"] { flex: 1 1 auto; }
.kh .kh-filters .kh-btn-2 { flex: 0 0 auto; min-height: 44px; }
.kh .screen-reader-text { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
@container kh (min-width: 761px) {
	.kh-filters { grid-template-columns: minmax(0, 240px) minmax(0, 180px) minmax(0, 1fr); }
	.kh-filters-search { grid-column: auto; }
}
.kh-requests { padding: 0; gap: 0; overflow: hidden; }
.kh-request + .kh-request { border-top: 1px solid var(--kh-line); }
.kh-request summary { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) auto; gap: 12px; align-items: baseline; padding: 14px 20px 14px 40px; cursor: pointer; list-style: none; position: relative; }
.kh-request summary::-webkit-details-marker { display: none; }
.kh-request summary::before { content: ""; position: absolute; left: 18px; top: 50%; width: 7px; height: 7px; border-right: 2px solid var(--kh-orange); border-bottom: 2px solid var(--kh-orange); transform: translateY(-70%) rotate(-45deg); transition: transform .15s; }
.kh-request[open] summary::before { transform: translateY(-70%) rotate(45deg); }
.kh-request summary:hover { background: var(--kh-soft); }
.kh-request summary:focus-visible { outline: 2px solid var(--kh-orange); outline-offset: -2px; }
.kh-request-form { font-weight: 700; color: var(--kh-ink); }
.kh-request-sum, .kh-request-form { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kh-request-date { white-space: nowrap; font-size: 14px; }
.kh-request .kh-answers { padding: 0 20px 18px 40px; margin: 0; }
.kh-pager { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 14px 0 0; }
@container kh (max-width:760px) {
	.kh-request summary { grid-template-columns: minmax(0, 1fr) auto; }
	.kh-request-sum { grid-column: 1 / -1; grid-row: 2; }
}

/*
 * A part of the client portal of Kwazi (hub 0.9): the full width of the portal's column (a size
 * container with auto margins shrinks to nothing in its grid), in the portal's font and colours.
 */
.kh.kh-part {
	width: 100%;
	margin: 0;
	padding: 0;
	font-family: inherit;
	font-size: inherit;
	color: inherit;
	--kh-accent: var(--kwazi-portal-link, #a64b10);
	--kh-line: var(--kwazi-portal-line, #c3c3c3);
}
/* The buttons of the portal style, as on core's own parts. */
.kh.kh-part .kh-btn {
	border: 2px solid var(--kwazi-portal-btn-border, #de7a37);
	border-radius: var(--kwazi-portal-btn-radius, 9999px);
	background: var(--kwazi-portal-btn-bg, #de7a37);
	color: var(--kwazi-portal-btn-fg, #090909);
	font-weight: var(--kwazi-portal-btn-weight, 700);
	text-transform: var(--kwazi-portal-btn-transform, none);
}
.kh.kh-part .kh-btn:hover { filter: brightness(0.95); background: var(--kwazi-portal-btn-bg, #de7a37); border-color: var(--kwazi-portal-btn-border, #de7a37); color: var(--kwazi-portal-btn-fg, #090909); }
.kh.kh-part .kh-btn-2 {
	border: 2px solid var(--kwazi-portal-btn2-border, #090909);
	border-radius: var(--kwazi-portal-btn-radius, 9999px);
	background: var(--kwazi-portal-btn2-bg, #fff);
	color: var(--kwazi-portal-btn2-fg, #090909);
}
.kh.kh-part h1, .kh.kh-part h2, .kh.kh-part h3 { font-family: inherit; color: inherit; }