/* ==========================================================================
   Stage S: simple user flows (owner, 2026-10-17: "make everything very simple, smooth and more visual, so the user is never
   confused"). Loaded LAST (functions.php, priority 100) after the visual layer, on every page, so every rule here is scoped to
   a component of one flow: the sign-in dialog (.mentayar-auth-overlay), the booking widget (.booking-widget), the checkout
   (.client-checkout), the client home (.client-home) and the therapist today view (.pro-today).
   New code uses only --ds-* tokens, logical properties, 44px targets and the existing colour families (.ds-f-*). Brand themes:
   RavanLine re-points the same tokens (body.is-ravanline in tokens.css), nothing here is brand-specific.
   ========================================================================== */

/* ---------- shared: the progress stepper (time -> details -> pay) ---------- */
.simple-steps { display: flex; align-items: flex-start; gap: 0; margin: 0 0 var(--ds-space-4); padding: 0; list-style: none; }
.simple-steps__item { position: relative; flex: 1 1 0; min-inline-size: 0; display: flex; flex-direction: column; align-items: center; gap: var(--ds-space-1); text-align: center; color: var(--ds-text-2); font-size: var(--ds-fs-xs); line-height: 1.3; }
/* the connecting line sits behind the circles, between neighbours */
.simple-steps__item + .simple-steps__item::before { content: ""; position: absolute; inset-block-start: 1.375rem; inset-inline-end: 50%; inline-size: 100%; block-size: 3px; background: var(--ds-line); border-radius: 3px; z-index: 0; }
.simple-steps__item.is-done + .simple-steps__item::before,
.simple-steps__item[aria-current="step"]::before { background: var(--ds-action); }
.simple-steps__dot { position: relative; z-index: 1; inline-size: 2.75rem; block-size: 2.75rem; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--ds-radius-pill); background: var(--ds-surface); border: 2px solid var(--ds-line); color: var(--ds-text-2); transition: background var(--ds-dur) var(--ds-ease), color var(--ds-dur) var(--ds-ease), border-color var(--ds-dur) var(--ds-ease); }
.simple-steps__dot .ds-icon { inline-size: 1.25rem; block-size: 1.25rem; }
.simple-steps__item.is-done .simple-steps__dot { background: var(--ds-action); border-color: var(--ds-action); color: var(--ds-on-action); }
.simple-steps__item[aria-current="step"] .simple-steps__dot { background: var(--ds-mint-strong); border-color: var(--ds-action); color: var(--ds-deep); box-shadow: 0 0 0 4px var(--ds-mint); }
.simple-steps__item[aria-current="step"] { color: var(--ds-deep); font-weight: var(--ds-fw-semibold); }
.simple-steps__item.is-done { color: var(--ds-text); }
.simple-steps__label { display: block; max-inline-size: 100%; overflow-wrap: anywhere; }
.simple-steps--compact { max-inline-size: 22rem; margin-inline: auto; }
.simple-steps--compact .simple-steps__dot { inline-size: 2.25rem; block-size: 2.25rem; }
.simple-steps--compact .simple-steps__item + .simple-steps__item::before { inset-block-start: 1.0625rem; }
.simple-steps--compact .simple-steps__dot .ds-icon { inline-size: 1.0625rem; block-size: 1.0625rem; }

/* ---------- shared: a "more details" disclosure that looks like a quiet link ---------- */
.simple-more { margin-block: var(--ds-space-2); }
.simple-more > summary { display: inline-flex; align-items: center; gap: var(--ds-space-2); min-block-size: var(--ds-control-h); padding-inline: var(--ds-space-1); cursor: pointer; list-style: none; color: var(--ds-deep); font-weight: var(--ds-fw-semibold); font-size: var(--ds-fs-sm); border-radius: var(--ds-radius-sm); }
.simple-more > summary::-webkit-details-marker { display: none; }
.simple-more > summary > .ds-icon { inline-size: 1.125rem; block-size: 1.125rem; flex: none; transition: transform var(--ds-dur) var(--ds-ease); }
.simple-more[open] > summary > .ds-icon:last-child { transform: rotate(180deg); }
.simple-more > summary:focus-visible { outline: var(--ds-focus-width) solid var(--ds-focus); outline-offset: var(--ds-focus-offset); }
.simple-more__body { padding-block-end: var(--ds-space-2); color: var(--ds-text-2); font-size: var(--ds-fs-sm); }
.simple-more__body > :first-child { margin-block-start: 0; }
.simple-more__body > :last-child { margin-block-end: 0; }

/* ==========================================================================
   1. Sign-in dialog
   ========================================================================== */
.mentayar-auth-overlay .mentayar-modal { padding-block-start: var(--ds-space-8); }
.mentayar-auth-overlay [data-step] { display: block; }
.mentayar-auth-overlay [data-step][hidden] { display: none; }
.mentayar-auth-overlay .mentayar-modal h2 { font-size: var(--ds-fs-xl); line-height: var(--ds-lh-tight); margin-block: var(--ds-space-3) var(--ds-space-1); text-align: center; }
.mentayar-auth-overlay .mentayar-modal__hint { margin-block: 0 var(--ds-space-5); color: var(--ds-text-2); text-align: center; }
.auth-badge { display: flex; align-items: center; justify-content: center; inline-size: 3.5rem; block-size: 3.5rem; margin-inline: auto; border-radius: 18px; background: var(--ds-f-bg, var(--ds-mint-strong)); color: var(--ds-f-ink, var(--ds-deep)); }
.auth-top { position: absolute; inset-block-start: var(--ds-space-2); inset-inline-start: var(--ds-space-2); }
.auth-back { display: inline-flex; align-items: center; justify-content: center; inline-size: var(--ds-control-h); block-size: var(--ds-control-h); border: 0; border-radius: var(--ds-radius-pill); background: transparent; color: var(--ds-text); cursor: pointer; }
.auth-back[hidden] { display: none; }
.auth-back:hover { background: var(--ds-mint); }
/* "back" points to the start of the line: left in English, right in Persian */
html[dir="ltr"] .auth-back .ds-icon { transform: none; }
html[dir="rtl"] .auth-back .ds-icon { transform: scaleX(-1); }
.auth-back:focus-visible, .auth-pass__toggle:focus-visible, .auth-choice:focus-visible, .mentayar-auth-overlay .mentayar-modal__close:focus-visible { outline: var(--ds-focus-width) solid var(--ds-focus); outline-offset: var(--ds-focus-offset); }

/* the two big choices */
.auth-choices { display: grid; gap: var(--ds-space-3); }
.auth-choices > div { display: contents; }
.auth-choices > div[hidden] { display: none; }
.auth-choice { display: flex; align-items: center; gap: var(--ds-space-4); inline-size: 100%; min-block-size: 4.5rem; padding: var(--ds-space-3) var(--ds-space-4); background: var(--ds-surface); border: 2px solid var(--ds-line); border-radius: var(--ds-radius-card); color: var(--ds-text); font: inherit; text-align: start; cursor: pointer; transition: border-color var(--ds-dur) var(--ds-ease), box-shadow var(--ds-dur) var(--ds-ease), background var(--ds-dur) var(--ds-ease); }
.auth-choice:hover { border-color: var(--ds-f-ink, var(--ds-action)); background: var(--ds-f-bg, var(--ds-mint)); box-shadow: var(--ds-shadow-card); }
.auth-choice__icon { flex: none; display: inline-flex; align-items: center; justify-content: center; inline-size: 3rem; block-size: 3rem; border-radius: 14px; background: var(--ds-f-bg); color: var(--ds-f-ink); }
.auth-choice:hover .auth-choice__icon { background: var(--ds-surface); }
.auth-choice__text { flex: 1 1 auto; min-inline-size: 0; display: flex; flex-direction: column; gap: 2px; }
.auth-choice__text strong { font-size: var(--ds-fs-md); font-weight: var(--ds-fw-bold); }
.auth-choice__text small { font-size: var(--ds-fs-xs); color: var(--ds-text-2); line-height: 1.4; }
.auth-choice__go { flex: none; color: var(--ds-text-2); }

/* social buttons: same height as every other control */
.mentayar-auth-overlay .btn--social { min-block-size: var(--ds-control-h); justify-content: center; gap: var(--ds-space-2); }
.mentayar-auth-overlay .btn--social svg { inline-size: 1.25rem; block-size: 1.25rem; flex: none; }

/* forms */
.mentayar-auth-overlay .mentayar-modal__tabs { gap: var(--ds-space-1); padding: var(--ds-space-1); margin-block: var(--ds-space-4) var(--ds-space-2); background: var(--ds-tint); border: 0; border-radius: var(--ds-radius-control); }
.mentayar-auth-overlay .mentayar-modal__tab { flex: 1 1 0; border: 0; border-radius: var(--ds-radius-sm); color: var(--ds-text-2); font-weight: var(--ds-fw-semibold); }
.mentayar-auth-overlay .mentayar-modal__tab.is-active { background: var(--ds-surface); color: var(--ds-deep); box-shadow: 0 1px 3px rgba(23, 43, 42, 0.14); }
.mentayar-auth-overlay .mentayar-modal__tab:focus-visible { outline: var(--ds-focus-width) solid var(--ds-focus); outline-offset: var(--ds-focus-offset); }
.mentayar-auth-overlay .mentayar-modal__tabs[hidden] { display: none; }
.auth-pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--ds-space-3); }
.auth-pass { position: relative; }
.auth-pass .mentayar-modal__input { padding-inline-end: calc(var(--ds-control-h) + var(--ds-space-1)); }
.auth-pass__toggle { position: absolute; inset-block-start: 0; inset-inline-end: 0; inline-size: var(--ds-control-h); block-size: var(--ds-control-h); display: inline-flex; align-items: center; justify-content: center; border: 0; background: transparent; color: var(--ds-text-2); border-radius: var(--ds-radius-control); cursor: pointer; }
.auth-pass__toggle:hover { color: var(--ds-deep); }
.mentayar-auth-overlay .mentayar-modal__forgot { margin-block: var(--ds-space-2) var(--ds-space-4); }
.mentayar-auth-overlay .btn--primary { min-block-size: 3rem; font-size: var(--ds-fs-md); font-weight: var(--ds-fw-bold); }
.mentayar-auth-overlay .mentayar-modal__otp-row input { min-block-size: 3.5rem; font-size: 1.75rem; letter-spacing: 0.5em; text-align: center; inline-size: 100%; }
.auth-sent { display: flex; align-items: flex-start; justify-content: center; gap: var(--ds-space-2); margin-block: var(--ds-space-4) 0; padding: var(--ds-space-3); border-radius: var(--ds-radius-control); background: var(--ds-success-bg); color: var(--ds-success); text-align: start; }
.auth-sent[hidden] { display: none; }
.auth-sent .ds-icon { flex: none; margin-block-start: 2px; }

/* an error is a visible box with an icon, not a thin line below the sheet */
.mentayar-auth-overlay .mentayar-modal__error:not(:empty) { margin-block: var(--ds-space-3) 0; padding: var(--ds-space-3) var(--ds-space-4); border: 1px solid var(--ds-danger-line); border-radius: var(--ds-radius-control); background: var(--ds-danger-bg); color: var(--ds-danger); text-align: start; font-weight: var(--ds-fw-medium); }
.mentayar-auth-overlay .mentayar-modal__error.is-info:not(:empty) { border-color: var(--ds-info-line); background: var(--ds-info-bg); color: var(--ds-info); }
.mentayar-auth-overlay .mentayar-modal__error:empty { margin: 0; min-block-size: 0; }
.mentayar-auth-overlay .mentayar-modal__resend { margin-block-start: var(--ds-space-3); }

@media (prefers-reduced-motion: reduce) {
	.simple-steps__dot, .auth-choice, .simple-more > summary > .ds-icon { transition: none; }
}

/* ==========================================================================
   2. Booking widget (step 1: time)
   ========================================================================== */
.booking-widget .simple-steps { margin-block: var(--ds-space-3) var(--ds-space-4); }
.booking-widget .pill { gap: var(--ds-space-2); }
.booking-widget .pill .ds-icon { inline-size: 1.125rem; block-size: 1.125rem; flex: none; }
.booking-widget .client-selection { display: grid; gap: var(--ds-space-1); border: 1px solid var(--ds-f-teal-bg); border-inline-start: 4px solid var(--ds-action); background: var(--ds-mint); }
.booking-widget .client-selection__title { display: flex; align-items: center; gap: var(--ds-space-2); }
.booking-widget .client-selection__price { display: flex; align-items: center; gap: var(--ds-space-2); margin-block-start: var(--ds-space-1); color: var(--ds-deep); font-weight: var(--ds-fw-bold); }
.booking-widget .client-selection__price .ds-icon { flex: none; }
/* the chosen time already carries length and price, so the plain facts list steps aside */
.booking-widget .client-selection:not([hidden]) ~ .booking-widget__facts li:not([data-fact-location-row]) { display: none; }
.booking-widget .client-selection:not([hidden]) ~ .booking-widget__facts:not(:has(li[data-fact-location-row]:not([hidden]))) { display: none; }
.booking-widget fieldset.booking-widget__section + .booking-widget__section { margin-block-start: var(--ds-space-4); }
.booking-widget .booking-widget__note.simple-more { margin-block: var(--ds-space-2) 0; }
.booking-widget .client-subnote { padding-block: var(--ds-space-1); }
.booking-widget .time-slot { min-block-size: var(--ds-control-h); }
.booking-widget [data-submit-booking] { min-block-size: 3rem; font-weight: var(--ds-fw-bold); }

/* ==========================================================================
   3. Checkout
   ========================================================================== */
.client-checkout .simple-steps { max-inline-size: 32rem; margin-inline: auto; margin-block-end: var(--ds-space-5); }
.checkout__summary-specialist > div { display: flex; flex-direction: column; gap: 2px; min-inline-size: 0; }
.checkout__summary-specialist-fallback { display: inline-flex !important; align-items: center; justify-content: center; background: var(--ds-f-teal-bg) !important; color: var(--ds-f-teal-ink); }
.simple-sum__meta { display: inline-flex; align-items: center; gap: var(--ds-space-1); color: var(--ds-text-2); font-size: var(--ds-fs-sm); font-weight: var(--ds-fw-regular); }
.simple-sum__meta .ds-icon { flex: none; }
.simple-sum__when { display: flex; align-items: center; gap: var(--ds-space-3); margin-block: var(--ds-space-3); padding: var(--ds-space-3); background: var(--ds-mint); border-radius: var(--ds-radius-control); }
.simple-sum__when > div { min-inline-size: 0; }
.simple-sum__label { display: block; color: var(--ds-text-2); font-size: var(--ds-fs-xs); }
.simple-sum__total { display: flex; align-items: center; justify-content: space-between; gap: var(--ds-space-3); margin-block-start: var(--ds-space-3); padding-block-start: var(--ds-space-3); border-block-start: 1px dashed var(--ds-line); }
.simple-sum__total > span { display: inline-flex; align-items: center; gap: var(--ds-space-2); color: var(--ds-text-2); font-weight: var(--ds-fw-medium); }
.simple-sum__total > strong { font-size: var(--ds-fs-xl); color: var(--ds-deep); }
.checkout__summary:has(> .simple-fee) { padding-block: var(--ds-space-1); }
.simple-fee > summary { inline-size: 100%; }
.simple-fee > summary > span { flex: 1 1 auto; }
.checkout__summary .simple-more { margin-block: 0; }
.checkout__summary h2 { display: block; }

/* folding "your details" box */
.simple-details { margin-block: 0 var(--ds-space-5); border: 1px solid var(--ds-line); border-radius: var(--ds-radius-card); background: var(--ds-surface); }
.simple-details > summary { display: flex; align-items: center; gap: var(--ds-space-3); min-block-size: 3.5rem; padding: var(--ds-space-3) var(--ds-space-4); color: var(--ds-text); font-weight: var(--ds-fw-regular); }
.simple-details__icon { flex: none; display: inline-flex; align-items: center; justify-content: center; inline-size: 2.5rem; block-size: 2.5rem; border-radius: 12px; background: var(--ds-f-amber-bg); color: var(--ds-f-amber-ink); }
.simple-details.is-complete .simple-details__icon { background: var(--ds-success-bg); color: var(--ds-success); }
.simple-details__text { flex: 1 1 auto; min-inline-size: 0; display: flex; flex-direction: column; gap: 2px; }
.simple-details__text strong { font-size: var(--ds-fs-md); }
.simple-details__text small { color: var(--ds-text-2); font-size: var(--ds-fs-xs); overflow-wrap: anywhere; }
.simple-details__body { padding: var(--ds-space-2) var(--ds-space-4) var(--ds-space-4); border-block-start: 1px solid var(--ds-line); }
.simple-details__body > .checkout__billing-title:first-child { margin-block-start: var(--ds-space-3); }

/* phones and tablets: summary, price, code, then what to fill in and pay; support last */
@media (max-width: 1023.98px) {
	.client-checkout__grid { display: flex; flex-direction: column; align-items: stretch; gap: var(--ds-space-4); }
	.client-checkout__side { display: contents; }
	.client-checkout__side > [data-summary] { order: 1; }
	.client-checkout__side > [data-fee] { order: 2; }
	.client-checkout__side > [data-discount-box] { order: 3; }
	.client-checkout__grid > .checkout__main { order: 4; }
	.client-checkout__side > .checkout__support { order: 5; }
}
.client-checkout .ds-btn--lg { min-block-size: 3rem; font-weight: var(--ds-fw-bold); }

/* the result screen */
.checkout__done { text-align: center; }
.checkout__done .confirmation-box { padding: var(--ds-space-2) 0; }
.checkout__done .confirmation-box__icon { inline-size: 5rem; block-size: 5rem; background: var(--ds-success-bg); color: var(--ds-success); box-shadow: 0 0 0 8px var(--ds-success-bg); margin-block-end: var(--ds-space-3); animation: simple-pop 420ms var(--ds-ease) both; }
.checkout__done .confirmation-box__icon .ds-icon { inline-size: 2.5rem; block-size: 2.5rem; stroke-width: 2.2; }
@keyframes simple-pop { from { transform: scale(0.6); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.done-when { display: flex; align-items: center; gap: var(--ds-space-4); margin-block: var(--ds-space-4); padding: var(--ds-space-4); background: var(--ds-mint); border: 1px solid var(--ds-f-teal-bg); border-radius: var(--ds-radius-card); text-align: start; }
.done-when > div { min-inline-size: 0; }
.done-when__who { display: block; font-size: var(--ds-fs-lg); }
.done-when__meta { display: block; margin-block-start: var(--ds-space-1); color: var(--ds-text-2); font-size: var(--ds-fs-sm); }
.checkout__done .confirmation-box__actions { flex-direction: column; align-items: stretch; margin-block-end: var(--ds-space-4); }
.checkout__done .confirmation-box__actions > * { inline-size: 100%; }
.checkout__done .confirmation-box__actions [data-confirmation-calendar] > * { inline-size: 100%; }
.done-next { text-align: start; margin-block: var(--ds-space-4); padding: var(--ds-space-4); background: var(--ds-surface); border: 1px solid var(--ds-line); border-radius: var(--ds-radius-card); }
.done-next h3 { margin: 0 0 var(--ds-space-3); font-size: var(--ds-fs-md); }
.done-next__list { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--ds-space-3); }
.done-next__list li { display: flex; align-items: flex-start; gap: var(--ds-space-3); color: var(--ds-text); font-size: var(--ds-fs-sm); line-height: 1.6; }
.done-next__list li > span:last-child { padding-block-start: 0.4rem; }
.done-more { text-align: start; }
.done-more .confirmation-box__facts { margin-block: 0; }
@media (prefers-reduced-motion: reduce) { .checkout__done .confirmation-box__icon { animation: none; } }

/* once the booking is confirmed the summary is on the result card itself: show that card alone, centred */
.client-checkout__grid:has([data-confirmation]:not([hidden])) { grid-template-columns: minmax(0, 36rem); justify-content: center; margin-inline: auto; }
.client-checkout__grid:has([data-confirmation]:not([hidden])) > .client-checkout__side { display: none; }
.client-checkout__grid:has([data-confirmation]:not([hidden])) > .checkout__main { max-inline-size: 36rem; margin-inline: auto; inline-size: 100%; }

/* ==========================================================================
   4. Client home and sessions
   ========================================================================== */
.simple-countdown { display: flex; align-items: center; gap: var(--ds-space-1); margin-block-start: 2px; font-size: var(--ds-fs-sm); font-weight: var(--ds-fw-medium); }
.simple-countdown .ds-icon { flex: none; }
.simple-linkbtn { display: inline-flex; align-items: center; justify-content: center; min-block-size: var(--ds-control-h); padding-inline: var(--ds-space-3); background: transparent; border: 0; border-radius: var(--ds-radius-control); color: #fff; font: inherit; font-weight: var(--ds-fw-semibold); text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }
.simple-linkbtn:focus-visible { outline: var(--ds-focus-width) solid var(--ds-focus-on-dark); outline-offset: var(--ds-focus-offset); }
.client-home__next .ds-feature__actions { align-items: center; gap: var(--ds-space-2); }
.client-quick { margin-block: var(--ds-space-5); }
.ds-tiles--quick { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ds-tiles--quick .ds-tile { block-size: 100%; }
@media (max-width: 359.98px) { .ds-tiles--quick { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 640px) { .ds-tiles--quick { gap: var(--ds-space-4); } }
.ds-state__pic { margin-block-end: var(--ds-space-1); }
.client-appt__more { grid-column: 1 / -1; margin: 0; }
/* the sessions area has two levels of navigation: the section list becomes quiet chips so the three tabs below stay the main control */
.client-subnav { border-block-end: 0; }
.client-subnav ul { gap: var(--ds-space-2); padding-block-end: var(--ds-space-1); scroll-snap-type: x proximity; }
.client-subnav a { border: 1px solid var(--ds-line); border-radius: var(--ds-radius-pill); background: var(--ds-surface); min-block-size: var(--ds-control-h); scroll-snap-align: start; white-space: nowrap; }
.client-subnav a[aria-current="page"] { background: var(--ds-mint-strong); border-color: var(--ds-action); color: var(--ds-deep); font-weight: var(--ds-fw-semibold); }
/* a tile made from a <button> must fill its grid cell like a tile made from a link (equal widths in every row) */
.ds-tiles > li > .ds-tile { inline-size: 100%; block-size: 100%; }
.client-subnav ul { scrollbar-width: none; }
.client-subnav ul::-webkit-scrollbar { display: none; }

/* ==========================================================================
   5. Therapist home: today first
   ========================================================================== */
.pro-stats { list-style: none; margin: 0 0 var(--ds-space-5); padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--ds-space-3); }
.pro-stat { display: flex; flex-direction: column; align-items: center; gap: var(--ds-space-1); inline-size: 100%; block-size: 100%; min-block-size: var(--ds-control-h); padding: var(--ds-space-3) var(--ds-space-2); background: var(--ds-surface); border: 1px solid var(--ds-line); border-radius: var(--ds-radius-card); color: var(--ds-text); font: inherit; text-align: center; cursor: pointer; transition: border-color var(--ds-dur) var(--ds-ease), box-shadow var(--ds-dur) var(--ds-ease); }
.pro-stat:hover { border-color: var(--ds-f-ink); box-shadow: var(--ds-shadow-card); }
.pro-stat:focus-visible { outline: var(--ds-focus-width) solid var(--ds-focus); outline-offset: var(--ds-focus-offset); }
.pro-stat__num { font-size: var(--ds-fs-3xl); font-weight: var(--ds-fw-bold); line-height: 1; color: var(--ds-f-ink); }
.pro-stat__label { font-size: var(--ds-fs-xs); color: var(--ds-text-2); line-height: 1.3; }
.pro-start { min-block-size: 3rem; gap: var(--ds-space-2); font-weight: var(--ds-fw-bold); }
@media (max-width: 639.98px) { .pro-today .pro-start { inline-size: 100%; } }
.pro-today .sp-today__time { font-size: var(--ds-fs-xl); }
.pro-empty { background: var(--ds-surface); border: 1px dashed var(--ds-line); border-radius: var(--ds-radius-card); }
.pro-more { margin-block-start: var(--ds-space-5); }
.pro-more > summary { display: flex; align-items: center; gap: var(--ds-space-3); min-block-size: 3.25rem; padding: var(--ds-space-3) var(--ds-space-4); background: var(--ds-surface); border: 1px solid var(--ds-line); border-radius: var(--ds-radius-card); list-style: none; cursor: pointer; color: var(--ds-deep); font-weight: var(--ds-fw-semibold); }
.pro-more > summary::-webkit-details-marker { display: none; }
.pro-more > summary > span { flex: 1 1 auto; }
.pro-more[open] > summary > .ds-icon:last-child { transform: rotate(180deg); }
.pro-more > summary:focus-visible { outline: var(--ds-focus-width) solid var(--ds-focus); outline-offset: var(--ds-focus-offset); }
.pro-more > .sp-home__aside { margin-block-start: var(--ds-space-4); }
@media (min-width: 1024px) {
	.pro-more { margin-block-start: 0; }
	.pro-more > summary { display: none; }
	.pro-more > .sp-home__aside { margin-block-start: 0; }
}
.pro-today .sp-today__time { justify-self: start; padding-inline: var(--ds-space-3); }
.auth-fieldhint { margin: var(--ds-space-1) 0 0; color: var(--ds-text-2); font-size: var(--ds-fs-xs); }
.auth-fieldhint[hidden] { display: none; }

/* ==========================================================================
   CHECKOUT, SHORT (2026-10-17): ask only what the chosen payment method uses, fold the rest, tighten phones.
   Fields per method live in assets/js/checkout.js (FIELD_RULES) and are covered by bin/tests/cases/checkout_fields.php.
   ========================================================================== */
/* name pair on one row, mobile and email full width; the optional address box is folded */
.client-checkout .simple-details__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--ds-space-3); }
.client-checkout .simple-details__grid > .simple-details__wide, .client-checkout .simple-details__grid > [data-email-field] { grid-column: 1 / -1; }
.client-checkout .simple-details__grid > .ds-field, .client-checkout [data-optional-grid] > .ds-field { margin-block-end: var(--ds-space-2); }
.client-checkout [data-optional-grid] { grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: 0 var(--ds-space-3); }
.client-checkout [data-optional-grid] [data-email-field] { grid-column: 1 / -1; }
.client-checkout [data-email-field] .ds-field__label[data-optional]:not([data-optional=""])::after { content: " (" attr(data-optional) ")"; color: var(--ds-text-2); font-weight: var(--ds-fw-regular); }
.simple-invoice { margin-block: var(--ds-space-1) 0; }
.simple-invoice > summary { inline-size: 100%; justify-content: space-between; color: var(--ds-text-2); font-size: var(--ds-fs-sm); }
.simple-invoice__hint { margin: 0 0 var(--ds-space-2); color: var(--ds-text-2); font-size: var(--ds-fs-xs); }
.simple-details__body { padding-block: var(--ds-space-3) var(--ds-space-2); }
/* the discount code is one quiet line until asked for */
.simple-discount.checkout__summary { padding: 0 var(--ds-space-3); }
.simple-discount__fold > summary { inline-size: 100%; min-block-size: 3rem; }
.simple-discount__fold > summary > span { flex: 1 1 auto; }
.simple-discount__fold .simple-more__body { padding-block-end: var(--ds-space-3); }

@media (max-width: 1023.98px) {
	/* title, steps, cards: smaller rhythm */
	.client-checkout.section { padding-block-start: var(--ds-space-4); }
	.client-checkout > h1 { margin-block: 0 var(--ds-space-3); font-size: var(--ds-fs-2xl, 1.5rem); }
	.client-checkout .simple-steps { margin-block-end: var(--ds-space-3); }
	.client-checkout .simple-steps__dot { inline-size: 2.25rem; block-size: 2.25rem; }
	.client-checkout__grid { gap: var(--ds-space-2); }
	.checkout__summary, .checkout__payment { padding: var(--ds-space-3); border-radius: var(--ds-radius-control); }
	/* the card titles repeat the step bar: keep them for screen readers only */
	.checkout__summary > h2, .checkout__payment > h2 { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; margin: 0; }
	/* appointment: who and when side by side with the price, no extra boxes */
	.checkout__summary-specialist { margin-block-end: var(--ds-space-2); gap: var(--ds-space-3); }
	.checkout__summary-specialist img, .checkout__summary-specialist-fallback { inline-size: 40px; block-size: 40px; }
	.simple-sum__when { margin-block: var(--ds-space-2); padding: var(--ds-space-2) var(--ds-space-3); gap: var(--ds-space-3); }
	.simple-sum__when .ds-ibox { inline-size: 2.5rem; block-size: 2.5rem; flex: none; }
	.simple-sum__total { margin-block-start: var(--ds-space-2); padding-block-start: var(--ds-space-2); }
	.simple-sum__total > strong { font-size: var(--ds-fs-lg); }
	.checkout__summary [data-choose-other] { min-block-size: 2rem; padding-block: 0; margin-block-start: var(--ds-space-1); }
	.checkout__summary:has(> .simple-fee) { padding-block: 0; padding-inline: var(--ds-space-3); }
	.simple-fee > summary { min-block-size: 3rem; }
	.simple-sum__label { display: none; }
	.simple-sum__when { align-items: center; }
	.simple-sum__when .ds-ibox { display: none; }
	.simple-sum__total > span { font-size: var(--ds-fs-sm); }
	.checkout__summary [data-choose-other] { margin-block-start: 0; }
	.simple-fee > summary, .simple-discount__fold > summary { min-block-size: 2.75rem; }
	/* payment: method title off (still the tabs' accessible name), tabs and button close together */
	#co-method-title { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; margin: 0; }
	.checkout__payment { border: 0; background: transparent; padding: 0; }
	.simple-details { margin-block-end: var(--ds-space-3); }
	.simple-details > summary { min-block-size: 3.25rem; padding: var(--ds-space-2) var(--ds-space-3); }
	.checkout__billing-title { margin-block: var(--ds-space-3) var(--ds-space-2); }
	.gateway-tabs.ds-tabs { gap: var(--ds-space-1); }
	.gateway-panel { padding-block: var(--ds-space-2); }
	.gateway-panel .booking-widget__hint { margin-block: 0 var(--ds-space-2); }
	.checkout__payment > p.client-muted { margin-block: var(--ds-space-2) 0; font-size: var(--ds-fs-xs); }
	/* the help box: one compact line of contacts, last */
	.client-checkout__side > .checkout__support { padding: var(--ds-space-2) var(--ds-space-3); }
	.checkout__support h2 { font-size: var(--ds-fs-sm); margin-block-end: var(--ds-space-1); }
	.checkout__support-list { flex-direction: row; flex-wrap: wrap; gap: var(--ds-space-1) var(--ds-space-4); }
	/* the long site footer (links, social, contact) is not needed in the middle of paying; the legal bar stays */
	.tpl-template-booking .site-footer__top, .tpl-template-booking .site-footer__inner { display: none; }
}

/* ---- Quiz intro: the AI assistant entry under the start button (2026-10-17) ---- */
.mq-intro__assist { inline-size: min(100%, 24rem); margin-block-start: var(--ds-space-2); text-align: start; }

/* ---- BEGIN footer social row (2026-10-17, agent: footer-social) ----
   The icons were stacked: `.site-footer ul` (style.css, column + gap 0) out-ranked `.site-footer__social`. One row, wraps only when there are too many. */
.site-footer ul.site-footer__social { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: var(--ds-space-3); }
.site-footer__social > li { display: block; flex: 0 0 auto; margin: 0; padding: 0; }
.site-footer__social a { display: inline-flex; align-items: center; justify-content: center; min-inline-size: var(--ds-control-h); inline-size: var(--ds-control-h); block-size: var(--ds-control-h); padding: 0; border-radius: var(--ds-radius-pill); }
.site-footer__social a:focus-visible { outline: 2px solid var(--ds-focus); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .site-footer__social a { transition: none; } }
/* ---- END footer social row ---- */

/* ---- Home: install-the-app band (template-parts/home-v2/install.php, 2026-10-17) ---- */
/* Soft surface (mint on Mentayar, warm sand on RavanLine), a phone picture, one line, one button. Hidden in the installed app. */
.mhome-install { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--ds-space-5); position: relative; overflow: hidden; isolation: isolate; background: var(--ds-mint); border: 1px solid var(--ds-mint-strong); border-radius: 20px; padding: var(--ds-space-8); }
.mhome-install::before { content: ""; position: absolute; inset-inline-end: -3.5rem; inset-block-start: -6rem; inline-size: 13rem; block-size: 13rem; border-radius: 50%; background: rgba(0, 166, 147, 0.14); z-index: -1; }
body.is-ravanline .mhome-install { background: var(--ds-accent-bg); border-color: #EBDDC8; }
body.is-ravanline .mhome-install::before { background: rgba(138, 90, 43, 0.14); }
.mhome-install__badge { display: inline-grid; place-items: center; inline-size: 5rem; block-size: 5rem; border-radius: 50%; background: var(--ds-surface); color: var(--ds-action); box-shadow: 0 2px 10px rgba(23, 43, 42, 0.10); }
body.is-ravanline .mhome-install__badge { color: var(--ds-accent); }
.mhome-install__body h2 { margin: 0 0 var(--ds-space-1); font-size: var(--ds-fs-2xl); color: var(--ds-text); }
.mhome-install__body p { margin: 0; color: var(--ds-text-2); font-size: var(--ds-fs-md); }
.mhome-install__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ds-space-3) var(--ds-space-4); }
.mhome-install__actions a { text-decoration: none; }
body.is-ravanline .mhome-install .pub-textlink { color: var(--ds-accent); }
@media (max-width: 767px) {
	.mhome-install { grid-template-columns: auto minmax(0, 1fr); padding: var(--ds-space-5); gap: var(--ds-space-3) var(--ds-space-4); }
	.mhome-install__badge { inline-size: 3.5rem; block-size: 3.5rem; align-self: start; }
	.mhome-install__actions { justify-content: space-between; }
	.mhome-install__badge svg { inline-size: 34px; block-size: 34px; }
	.mhome-install__body h2 { font-size: var(--ds-fs-lg); }
	.mhome-install__actions { grid-column: 1 / -1; }
	.mhome-install__actions .btn { flex: 1 1 auto; justify-content: center; }
}
@media (display-mode: standalone), (display-mode: fullscreen), (display-mode: minimal-ui) { .mhome-install-wrap { display: none !important; } }
@media print { .mhome-install-wrap { display: none; } }
/* ---- END home install band ---- */

/* ---- BEGIN home: specialists' band is the last section (2026-10-17, agent: banner-last) ----
   The blue band now sits right above the footer; its own bottom padding plus the footer's top margin made a double gap. One gap only. */
body.home main > .pub-section:last-child { padding-block-end: 0; }
/* ---- END home: specialists' band last ---- */

/* ---- Quiz "finding the best options" screen (2026-10-17): the same screen the apps show between the last answer and the results ---- */
.mq-wait[hidden] { display: none; }
.mq-wait { display: grid; gap: var(--ds-space-5); padding: var(--ds-space-4) var(--ds-space-4) var(--ds-space-6); background: var(--ds-surface); border: 1px solid var(--ds-line); border-radius: 24px; box-shadow: var(--ds-shadow-card); }
.mq-wait__top { display: grid; gap: var(--ds-space-3); justify-items: start; }
.mq-wait__skip { min-block-size: 2.75rem; border-radius: var(--ds-radius-pill); background: var(--ds-mint-strong); color: var(--ds-deep); font-weight: var(--ds-fw-semibold); }
.mq-wait__bar { display: block; inline-size: 100%; block-size: 0.5rem; border-radius: var(--ds-radius-pill); background: var(--ds-tint); overflow: hidden; }
.mq-wait__bar > div, .mq-wait__bar > span { display: block; block-size: 100%; inline-size: 0; border-radius: inherit; background: linear-gradient(90deg, var(--ds-brand), var(--ds-action)); transition-property: width; transition-timing-function: cubic-bezier(0.25, 0.5, 0.5, 1); transition-duration: 0ms; }
.mq-wait__hero { display: grid; justify-items: center; gap: var(--ds-space-4); padding-block-start: var(--ds-space-3); }
.mq-wait__spark { display: grid; place-items: center; inline-size: 5.75rem; block-size: 5.75rem; border-radius: 50%; background: var(--ds-mint-strong); color: var(--ds-action); }
.mq-wait__title { margin: 0; font-size: var(--ds-fs-xl); line-height: 1.5; text-align: center; }
.mq-wait__title:focus { outline: none; }
.mq-wait__steps { display: grid; gap: var(--ds-space-4); margin: 0; padding: 0; list-style: none; max-inline-size: 30rem; inline-size: 100%; justify-self: center; }
.mq-wait__step { display: grid; gap: var(--ds-space-2); color: var(--ds-text-2); }
.mq-wait__step[data-state="active"], .mq-wait__step[data-state="done"] { color: var(--ds-text); }
.mq-wait__step[data-state="done"] .mq-wait__label::after { content: ""; display: inline-block; inline-size: 1rem; block-size: 1rem; margin-inline-start: var(--ds-space-2); vertical-align: -0.15em; border-radius: 50%; background: var(--ds-action) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 70% no-repeat; }
.mq-wait__trust { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ds-space-3); margin: 0; padding: 0; list-style: none; }
.mq-wait__trust li { display: grid; justify-items: center; align-content: start; gap: var(--ds-space-2); padding: var(--ds-space-3); border: 1px solid var(--ds-line); border-radius: 20px; background: var(--ds-surface); text-align: center; font-size: var(--ds-fs-sm); font-weight: var(--ds-fw-semibold); line-height: 1.5; }
.mq-wait__ticon { display: grid; place-items: center; inline-size: 2.5rem; block-size: 2.5rem; border-radius: 50%; background: var(--ds-mint-strong); color: var(--ds-action); }
@media (min-width: 720px) {
	.mq-wait { padding: var(--ds-space-5) var(--ds-space-6) var(--ds-space-7, var(--ds-space-6)); }
	.mq-wait__trust { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
/* a soft pulse on the sparkle while waiting; with reduced motion the steps still change, nothing moves */
@media (prefers-reduced-motion: no-preference) {
	.mq-wait[data-busy] .mq-wait__spark { animation: mq-wait-pulse 1.6s ease-in-out infinite; }
	@keyframes mq-wait-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }
}
@media (prefers-reduced-motion: reduce) { .mq-wait__bar > div, .mq-wait__bar > span { transition: none !important; } }
/* while the waiting screen is up, the page head shrinks like it does for the questions */
body:has([data-quiz-wait]:not([hidden])) .client-pagehead .ds-pagehead__sub,
body:has([data-quiz-wait]:not([hidden])) .client-pagehead .ds-breadcrumb { display: none; }

/* ---- BEGIN profile: booking widget date-first (2026-10-17, agent: place-and-dates) ----
   The place section and the «About the specialist» card now live in profile.css (profile redesign). What stays here: the date strip and the empty state. */
.booking-widget .date-carousel { position: relative; } /* contains the visually-hidden notes inside day chips (an absolutely positioned one would otherwise add page-wide horizontal scroll in RTL) */
.booking-widget__label-day { color: var(--ds-text-2); font-weight: var(--ds-fw-regular); }
.booking-widget .client-daychip:disabled, .booking-widget .client-daychip.is-empty { background: var(--ds-disabled-bg); color: var(--ds-disabled-text); border-color: transparent; cursor: not-allowed; opacity: 0.75; }
.booking-widget .client-daychip.is-empty .client-daychip__tag { opacity: 0.8; }
.booking-widget .booking-widget__empty { display: grid; justify-items: start; gap: var(--ds-space-2); text-align: start; padding: var(--ds-space-3); background: var(--ds-tint); border-radius: var(--ds-radius-control); }
.booking-widget .booking-widget__empty p { margin: 0; color: var(--ds-text); }
/* ---- END profile: booking widget date-first ---- */

/* ---- BEGIN hours editor: session formats (2026-10-17, agent: web hours editor) ----
   Weekly hours (assets/js/ds/specialist-hours.js): several time ranges a day, each with big format tiles (video / phone / in person and their
   mixes), an optional custom mix, a place picker, a plain sentence and warnings. Logical properties only (RTL/LTR); both brands use the same tokens. */
[data-hours-notes]:empty, [data-hours-attention]:empty { display: none; }
[data-hours-notes], [data-hours-attention] { margin-block: var(--ds-space-3); }
.sp-presets__note { margin-block: calc(var(--ds-space-1) * -1) var(--ds-space-2); }
.sp-noplace { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ds-space-3); padding: var(--ds-space-3) var(--ds-space-4); border: 1px solid var(--ds-line); border-radius: var(--ds-radius-card); background: var(--ds-surface); }
.sp-noplace__text { display: grid; gap: 2px; flex: 1 1 14rem; min-inline-size: 0; }
.sp-noplace__text span { color: var(--ds-text-2); font-size: var(--ds-fs-sm); }
.sp-dayrow__summary { min-inline-size: 0; flex: 1 1 8rem; text-align: end; overflow-wrap: anywhere; }
.sp-wins { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--ds-space-4); }
.sp-win { display: grid; gap: var(--ds-space-3); min-inline-size: 0; }
.sp-wins:has(.sp-win + .sp-win) > .sp-win { padding: var(--ds-space-3); border: 1px solid var(--ds-line); border-radius: var(--ds-radius-control); background: var(--ds-bg); }
.sp-win.has-error { border-color: var(--ds-danger); }
.sp-win > .sp-row { max-inline-size: 30rem; }
.sp-row--pair { flex-wrap: nowrap; }
.sp-row--pair > .ds-field { flex: 1 1 0; min-inline-size: 0; }
.sp-win__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--ds-space-2); }
.sp-win__title { font-weight: var(--ds-fw-semibold); }
.sp-win__sum { margin: 0; padding-inline-start: var(--ds-space-3); border-inline-start: 3px solid var(--ds-brand); color: var(--ds-deep); font-weight: var(--ds-fw-semibold); line-height: 1.6; }
.sp-win__sum:empty { display: none; }
.sp-win__note { display: flex; gap: var(--ds-space-2); align-items: flex-start; margin: 0; color: var(--ds-text-2); font-size: var(--ds-fs-sm); }
.sp-win__note .ds-icon { flex: none; margin-block-start: 0.15rem; }
.sp-win__note--warn { color: var(--ds-warning); }

/* the format tiles: one big picture-and-word button per choice */
.sp-fmt { border: 0; margin: 0; padding: 0; min-inline-size: 0; display: grid; gap: var(--ds-space-2); }
.sp-fmt__legend { padding: 0; font-weight: var(--ds-fw-semibold); margin-block-end: var(--ds-space-1); }
.sp-fmt__tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ds-space-2); }
.sp-tile { position: relative; display: block; min-inline-size: 0; }
.sp-tile input { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; margin: 0; opacity: 0; cursor: pointer; z-index: 1; }
.sp-tile__box { position: relative; display: grid; align-content: start; gap: var(--ds-space-1); block-size: 100%; min-block-size: 5.75rem; padding: var(--ds-space-3); border: 1px solid var(--ds-control-line); border-radius: 14px; background: var(--ds-surface); color: var(--ds-text); overflow-wrap: anywhere; }
.sp-tile:hover .sp-tile__box { border-color: var(--ds-deep); background: var(--ds-mint); }
.sp-tile input:checked + .sp-tile__box { border-color: var(--ds-action); box-shadow: inset 0 0 0 1px var(--ds-action); background: var(--ds-mint); }
.sp-tile input:focus-visible + .sp-tile__box { outline: var(--ds-focus-width) solid var(--ds-focus); outline-offset: 2px; }
.sp-tile input:checked + .sp-tile__box::after { content: ""; position: absolute; inset-block-start: 0.5rem; inset-inline-end: 0.5rem; inline-size: 1.25rem; block-size: 1.25rem; border-radius: 50%; background: var(--ds-action) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 70% no-repeat; }
.sp-tile__icons { display: flex; flex-wrap: wrap; gap: var(--ds-space-1); padding-inline-end: 1.5rem; }
.sp-tile__icons .ds-ibox--sm { inline-size: 1.75rem; block-size: 1.75rem; border-radius: 9px; }
.sp-tile__icons .ds-icon { inline-size: 1.05rem; block-size: 1.05rem; }
.sp-tile__label { font-weight: var(--ds-fw-semibold); line-height: 1.4; }
.sp-tile__sub { color: var(--ds-text-2); font-size: var(--ds-fs-xs); line-height: 1.45; }
.sp-fmt__custom { display: grid; gap: var(--ds-space-2); padding: var(--ds-space-3); border: 1px dashed var(--ds-control-line); border-radius: var(--ds-radius-control); background: var(--ds-surface); }
.sp-fmt__sublegend { margin: 0; font-weight: var(--ds-fw-semibold); font-size: var(--ds-fs-sm); }
.sp-fmt__hint { margin: 0; color: var(--ds-text-2); font-size: var(--ds-fs-sm); }
.sp-fmt__sws { display: flex; flex-wrap: wrap; gap: var(--ds-space-2); }
.sp-sw { position: relative; display: block; flex: 1 1 8rem; min-inline-size: 0; }
.sp-sw input { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; margin: 0; opacity: 0; cursor: pointer; z-index: 1; }
.sp-sw input:disabled { cursor: not-allowed; }
.sp-sw__box { display: flex; align-items: center; gap: var(--ds-space-2); min-block-size: var(--ds-control-h); padding: var(--ds-space-2) var(--ds-space-3); border: 1px solid var(--ds-control-line); border-radius: 12px; background: var(--ds-surface); }
.sp-sw__text { display: grid; line-height: 1.35; }
.sp-sw__name { font-weight: var(--ds-fw-semibold); }
.sp-sw__name::first-letter { text-transform: uppercase; }
.sp-sw__note { color: var(--ds-text-2); font-size: var(--ds-fs-xs); }
.sp-sw input:checked + .sp-sw__box { border-color: var(--ds-action); box-shadow: inset 0 0 0 1px var(--ds-action); background: var(--ds-mint); }
.sp-sw__box { position: relative; padding-inline-end: 2.25rem; }
.sp-sw input:checked + .sp-sw__box::after { content: ""; position: absolute; inset-block-start: 50%; inset-inline-end: 0.6rem; inline-size: 1.1rem; block-size: 1.1rem; margin-block-start: -0.55rem; border-radius: 50%; background: var(--ds-action) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 70% no-repeat; }
.sp-sw input:checked:disabled + .sp-sw__box::after { background-color: var(--ds-disabled-text); }
.sp-sw input:focus-visible + .sp-sw__box { outline: var(--ds-focus-width) solid var(--ds-focus); outline-offset: 2px; }
.sp-sw input:disabled + .sp-sw__box { color: var(--ds-disabled-text); }
.sp-sw.is-off .sp-sw__box { background: var(--ds-disabled-bg); border-style: dashed; }
.sp-place { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ds-space-2); margin: 0; font-weight: var(--ds-fw-semibold); }
.sp-place--one { color: var(--ds-deep); }
.sp-place.ds-field { display: grid; align-items: start; font-weight: inherit; }
.sp-place .ds-field__label { display: inline-flex; align-items: center; gap: var(--ds-space-1); }
.sp-dayrow__add { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ds-space-2) var(--ds-space-3); }
.sp-confirm:focus { outline: var(--ds-focus-width) solid var(--ds-focus); outline-offset: 2px; }
.sp-confirm__actions { display: flex; flex-wrap: wrap; gap: var(--ds-space-2); margin-block-start: var(--ds-space-3); }
.sp-fmtfield { display: grid; gap: var(--ds-space-2); }
.sp-fmtfield[hidden] { display: none; }
@media (min-width: 640px) {
	.sp-fmt__tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: no-preference) {
	.sp-tile__box, .sp-sw__box { transition: border-color 0.15s ease, background-color 0.15s ease; }
}
@media (forced-colors: active) {
	.sp-tile input:checked + .sp-tile__box, .sp-sw input:checked + .sp-sw__box { outline: 2px solid Highlight; }
}
/* ---- END hours editor: session formats ---- */

/* ---- BEGIN booking widget: session formats (2026-10-18, agent: widget formats) ----
   A format with nothing free in the next 30 days is a disabled pill with its reason listed under the options; a closed place is a disabled <option>.
   Logical properties only (RTL/LTR). */
.booking-widget .pill:has(input:disabled), .booking-widget .pill.is-off { background: var(--ds-disabled-bg); color: var(--ds-disabled-text); border-color: var(--ds-line); border-style: dashed; cursor: not-allowed; }
.booking-widget .pill:has(input:disabled):hover, .booking-widget .pill.is-off:hover { background: var(--ds-disabled-bg); color: var(--ds-disabled-text); }
.booking-widget .booking-widget__why { list-style: none; margin: var(--ds-space-2) 0 0; padding: 0; display: grid; gap: var(--ds-space-1); font-size: var(--ds-fs-sm); color: var(--ds-text-2); }
.booking-widget .booking-widget__why[hidden] { display: none; }
.booking-widget .booking-widget__why strong { color: var(--ds-text); font-weight: var(--ds-fw-semibold); }
.booking-widget [data-date-carousel] .booking-widget__empty { justify-items: start; }
/* ---- END booking widget: session formats ---- */

/* ---- BEGIN specialist card: equal height, price + button on one bottom line (2026-10-18, agent: directory) ----
   The card (specialist/card.php and client-core.js specialistCardHtml, same markup) is a flex column: __top (photo | name + title),
   __body (chips, formats, next times) and, inside the body, __foot (price + button) with margin-block-start:auto. Cards in one
   grid row are as tall as the tallest one (grid/flex stretch), so every price row and every button sits on the same line,
   whatever the number of area chips. Wide lists (directory, quiz results): price on one side, button on the other.
   Logical properties only (RTL/LTR), --ds-* tokens, no new motion. */
.specialist-card.client-card { block-size: auto; min-inline-size: 0; }
.specialist-card.client-card .specialist-card__top { display: grid; grid-template-columns: 4.75rem minmax(0, 1fr); column-gap: var(--ds-space-3); row-gap: var(--ds-space-1); align-content: center; align-items: start; min-inline-size: 0; }
.specialist-card.client-card .specialist-card__top:has(.specialist-card__badge) { padding-block-end: var(--ds-space-2); }
.specialist-card.client-card .specialist-card__name, .specialist-card.client-card .specialist-card__title { min-inline-size: 0; overflow-wrap: anywhere; }
.specialist-card.client-card > .specialist-card__body { display: flex; flex-direction: column; flex: 1 1 auto; gap: var(--ds-space-3); min-inline-size: 0; padding: 0; }
.specialist-card.client-card .client-card__intro { align-self: flex-start; }
.specialist-card.client-card .specialist-card__foot { display: grid; gap: var(--ds-space-3); margin-block-start: auto; padding-block-start: var(--ds-space-1); }
@media (min-width: 640px) {
	:is(#mentayar-directory-results, .matching-quiz__results .specialist-grid) .specialist-card.client-card .specialist-card__foot { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
}
@media (max-width: 639.98px) {
	.specialist-card.client-card .specialist-card__top { grid-template-columns: 4.25rem minmax(0, 1fr); }
	.specialist-card.client-card > .specialist-card__body { gap: var(--ds-space-2); }
	.specialist-card.client-card .specialist-card__foot { gap: var(--ds-space-2); }
}
/* ---- END specialist card ---- */

/* ---- BEGIN contact page (2026-10-18, agent: contact redesign) ----
   page-templates/template-contact.php + assets/js/contact-form.js. Tokens only, logical properties (RTL/LTR), no link underlines,
   motion only when the visitor allows it. RavanLine: body.is-ravanline swaps the hero tint like .pub-hero does. */
.ct-hero { background: linear-gradient(180deg, var(--ds-mint) 0%, var(--ds-surface) 100%); border-block-end: 1px solid var(--ds-line); padding-block: var(--ds-space-6) var(--ds-space-8); }
body.is-ravanline .ct-hero { background: linear-gradient(180deg, var(--ds-accent-bg) 0%, var(--ds-surface) 100%); }
.ct-hero__row { display: flex; align-items: center; justify-content: space-between; gap: var(--ds-space-8); margin-block-start: var(--ds-space-4); }
.ct-hero__text { max-inline-size: 40rem; display: grid; gap: var(--ds-space-3); justify-items: start; }
.ct-hero h1 { font-size: clamp(1.75rem, 1.2rem + 2.4vw, 2.5rem); line-height: var(--ds-lh-tight); margin: 0; }
.ct-hero__lead { color: var(--ds-text-2); font-size: var(--ds-fs-lg); margin: 0; }
.ct-eyebrow { display: inline-flex; align-items: center; gap: var(--ds-space-2); margin: 0; padding: var(--ds-space-1) var(--ds-space-3); border-radius: var(--ds-radius-pill); background: var(--ds-surface); border: 1px solid var(--ds-line); color: var(--ds-deep); font-size: var(--ds-fs-sm); font-weight: var(--ds-fw-semibold); }
.ct-hours { display: inline-flex; align-items: flex-start; gap: var(--ds-space-2); margin: 0; padding: var(--ds-space-2) var(--ds-space-3); border-radius: var(--ds-radius-control); background: var(--ds-surface); border: 1px solid var(--ds-line); color: var(--ds-text-2); font-size: var(--ds-fs-sm); }
.ct-hours .ds-icon { color: var(--ds-action); flex: none; margin-block-start: 0.15em; }
.ct-hours strong { color: var(--ds-text); font-weight: var(--ds-fw-semibold); margin-inline-end: var(--ds-space-1); }
.ct-hero__art { display: none; inline-size: 7rem; block-size: 7rem; border-radius: 32px; background: var(--ds-surface); border: 1px solid var(--ds-line); color: var(--ds-action); box-shadow: var(--ds-shadow-card); }
.ct-hero__art .ds-icon { inline-size: 3rem; block-size: 3rem; }
@media (min-width: 700px) { .ct-hero__art { display: inline-flex; } }

.ct-body { display: grid; gap: var(--ds-space-6); padding-block: var(--ds-space-8) var(--ds-space-6); }
@media (min-width: 900px) {
	.ct-body { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); align-items: start; gap: var(--ds-space-8); padding-block: var(--ds-space-10) var(--ds-space-8); }
	.ct-body--solo { grid-template-columns: minmax(0, 40rem); justify-content: center; }
}
.ct-channels__title { font-size: var(--ds-fs-md); margin: 0 0 var(--ds-space-3); color: var(--ds-text-2); font-weight: var(--ds-fw-semibold); }
.ct-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: var(--ds-space-3); }
.ct-card { position: relative; display: flex; align-items: center; gap: var(--ds-space-4); block-size: 100%; padding: var(--ds-space-3) var(--ds-space-4); background: var(--ds-surface); border: 1px solid var(--ds-line); border-radius: var(--ds-radius-card); color: var(--ds-text); text-decoration: none; }
a.ct-card:hover, a.ct-card:focus-visible { border-color: var(--ds-f-ink, var(--ds-action)); box-shadow: var(--ds-shadow-card); color: var(--ds-text); text-decoration: none; }
a.ct-card:focus-visible { outline: var(--ds-focus-width) solid var(--ds-focus); outline-offset: 2px; }
.ct-card__text { display: grid; gap: 2px; min-inline-size: 0; flex: 1 1 auto; }
.ct-card__label { font-size: var(--ds-fs-sm); color: var(--ds-text-2); }
.ct-card__value { font-weight: var(--ds-fw-semibold); overflow-wrap: anywhere; }
.ct-card__go { display: inline-flex; flex: none; color: var(--ds-text-2); }
a.ct-card:hover .ct-card__go { color: var(--ds-f-ink, var(--ds-action)); }
[dir="rtl"] .ct-card__go .ds-icon { transform: scaleX(-1); }

.ct-formcard { background: var(--ds-surface); border: 1px solid var(--ds-line); border-radius: 20px; box-shadow: var(--ds-shadow-card); padding: var(--ds-space-5); }
@media (min-width: 640px) { .ct-formcard { padding: var(--ds-space-8); } }
.ct-form { display: grid; gap: var(--ds-space-5); }
.ct-form[hidden], .ct-done[hidden] { display: none; }
.ct-form h2, .ct-done h2 { font-size: var(--ds-fs-xl); margin: 0; }
.ct-form__hint { margin: calc(var(--ds-space-3) * -1) 0 0; color: var(--ds-text-2); font-size: var(--ds-fs-sm); }
.ct-form input:not([type="hidden"]):not([type="radio"]):not([data-phone-number]), .ct-form textarea { inline-size: 100%; }
.ct-form .ds-field { margin: 0; }
.ct-form .ds-field input:not([type="radio"]):not([type="hidden"]):not([data-phone-number])[aria-invalid="true"], .ct-form .ds-field textarea[aria-invalid="true"], .ct-form .mentayar-phone-row input[aria-invalid="true"] { border-color: var(--ds-danger) !important; border-width: 2px; }  /* !important: the global input:focus rule would otherwise turn a focused invalid field grey again */
.ct-form .mentayar-phone-row { flex-wrap: nowrap; }
.ct-form .mentayar-phone-row .dial-code-wrap { min-block-size: var(--ds-control-h); }
.ct-form__pair { display: grid; gap: var(--ds-space-5); }
@media (min-width: 640px) { .ct-form__pair { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ct-topics { border: 0; padding: 0; margin: 0; min-inline-size: 0; }
.ct-topics legend { padding: 0; margin-block-end: var(--ds-space-2); }
.ct-chips { display: flex; flex-wrap: wrap; gap: var(--ds-space-2); }
.ct-chip { position: relative; display: block; }
.ct-chip input { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; margin: 0; opacity: 0; cursor: pointer; z-index: 1; }
.ct-chip__box { display: inline-flex; align-items: center; min-block-size: var(--ds-control-h); padding: var(--ds-space-2) var(--ds-space-4); border: 1px solid var(--ds-control-line); border-radius: var(--ds-radius-pill); background: var(--ds-surface); color: var(--ds-text); font-size: var(--ds-fs-sm); font-weight: var(--ds-fw-medium); }
.ct-chip:hover .ct-chip__box { border-color: var(--ds-deep); background: var(--ds-mint); }
.ct-chip input:checked + .ct-chip__box { border-color: var(--ds-action); box-shadow: inset 0 0 0 1px var(--ds-action); background: var(--ds-mint-strong); color: var(--ds-deep); font-weight: var(--ds-fw-semibold); }
.ct-chip input:focus-visible + .ct-chip__box { outline: var(--ds-focus-width) solid var(--ds-focus); outline-offset: 2px; }
.ct-form .ds-field__error { margin-block-start: var(--ds-space-2); }
.ct-form__privacy { display: flex; align-items: flex-start; gap: var(--ds-space-2); margin: 0; padding: var(--ds-space-3); border-radius: var(--ds-radius-control); background: var(--ds-mint); color: var(--ds-text-2); font-size: var(--ds-fs-sm); }
.ct-form__privacy .ds-icon { flex: none; color: var(--ds-action); margin-block-start: 0.2em; }
.ct-form__privacy a { color: var(--ds-deep); text-decoration: none; font-weight: var(--ds-fw-semibold); }
.ct-form__privacy a:hover, .ct-form__privacy a:focus-visible { text-decoration: none; color: var(--ds-action-hover); }
.ct-form__actions .btn { inline-size: 100%; justify-content: center; }
@media (min-width: 640px) { .ct-form__actions .btn { inline-size: auto; min-inline-size: 12rem; } }
.ct-form__status { min-block-size: 0; }
.ct-form__status:empty { display: none; }
.ct-form__status.is-error { padding: var(--ds-space-3); border-radius: var(--ds-radius-control); background: var(--ds-danger-bg, transparent); }

.ct-done { display: grid; justify-items: center; text-align: center; gap: var(--ds-space-3); padding-block: var(--ds-space-6); }
.ct-done p { margin: 0; color: var(--ds-text-2); max-inline-size: 28rem; }
.ct-done h2:focus { outline: none; }
.ct-done__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--ds-space-3); margin-block-start: var(--ds-space-3); }

.ct-faq-wrap { padding-block: 0 var(--ds-space-12); }
.ct-faq { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ds-space-4); padding: var(--ds-space-5); border: 1px solid var(--ds-line); border-radius: var(--ds-radius-card); background: var(--ds-mint); }
body.is-ravanline .ct-faq { background: var(--ds-accent-bg); }
.ct-faq__text { flex: 1 1 16rem; min-inline-size: 0; }
.ct-faq h2 { font-size: var(--ds-fs-md); margin: 0 0 2px; }
.ct-faq p { margin: 0; color: var(--ds-text-2); font-size: var(--ds-fs-sm); }
@media (max-width: 639.98px) { .ct-faq .btn { inline-size: 100%; justify-content: center; } }
@media (prefers-reduced-motion: no-preference) {
	.ct-card, .ct-chip__box { transition: border-color var(--ds-dur) var(--ds-ease), box-shadow var(--ds-dur) var(--ds-ease), background-color var(--ds-dur) var(--ds-ease), transform var(--ds-dur) var(--ds-ease); }
	a.ct-card:hover { transform: translateY(-2px); }
}
@media (forced-colors: active) {
	.ct-chip input:checked + .ct-chip__box { outline: 2px solid Highlight; }
}
/* ---- END contact page ---- */

/* ---- BEGIN find-a-specialist page head on phones (2026-10-18, agent: quiz phone/PWA parity) ----
   The lead was cut to two lines with "…" in the middle of the sentence (a global phone rule), and the "see all" ghost button kept
   its button padding, so it floated indented under the title. On this page the lead is shown in full and "see all" is a plain link
   aligned with the text, the same as the app's start screen. */
body:has(#mentayar-matching) .client-pagehead .ds-pagehead__sub { display: block; overflow: visible; -webkit-line-clamp: unset; line-clamp: unset; }
body:has(#mentayar-matching) .client-pagehead .ds-pagehead > .ds-btn--ghost { padding-inline: 0; min-block-size: 2.75rem; background: transparent; }
/* ---- END find-a-specialist page head ---- */

/* ---- BEGIN trust badges (2026-10-18, agent: trust-badge slot + payment receipt) ----
   The owner's own seals (RavanLine: the e-trust symbol), printed only when set in the back office. A seal is designed for a light
   ground, so each sits on a white tile; the tile has a FIXED size, so a late-loading image never moves the page. */
.trust-badges, .site-footer ul.trust-badges { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: var(--ds-space-3); }
.trust-badges > li { display: block; flex: 0 0 auto; margin: 0; padding: 0; }
.trust-badge, .site-footer a.trust-badge { display: flex; align-items: center; justify-content: center; inline-size: 5.5rem; block-size: 5.5rem; min-block-size: 0; padding: var(--ds-space-2); background: var(--ds-surface); border: 1px solid var(--ds-line); border-radius: var(--ds-radius-control); text-decoration: none; box-shadow: none; }
.trust-badge img { display: block; inline-size: 100%; block-size: 100%; object-fit: contain; }
.trust-badge:hover, .site-footer a.trust-badge:hover { background: var(--ds-surface); border-color: var(--ds-action); box-shadow: none; }
.trust-badge:focus-visible, .site-footer a.trust-badge:focus-visible { background: var(--ds-surface); outline: var(--ds-focus-width) solid var(--ds-focus); outline-offset: 2px; box-shadow: none; }
.trust-badges--inline { margin-block-start: var(--ds-space-4); }
.trust-badges--inline .trust-badge { inline-size: 4rem; block-size: 4rem; padding: var(--ds-space-1); }
.site-footer__trust { padding-block: var(--ds-space-5); border-block-start: 1px solid color-mix(in srgb, var(--ds-on-ink) 10%, transparent); }
.tpl-template-booking .site-footer__trust { display: none; }   /* the checkout carries its own small badge beside the pay button */
.jn-aside .trust-badges--inline { margin-block-start: var(--ds-space-1); }   /* join page: under what is asked */
@media (prefers-reduced-motion: no-preference) { .trust-badge { transition: border-color var(--ds-dur) var(--ds-ease); } }
@media (forced-colors: active) { .trust-badge { border-color: CanvasText; } }
@media print { .site-footer__trust { display: none; } }
/* ---- END trust badges ---- */

/* ---- BEGIN join page (2026-10-18, agent: join-us redesign) ----
   page-templates/template-specialist-application.php + assets/js/specialist-application.js + inc/ds/join.php. Tokens only (--ds-*),
   logical properties (RTL/LTR), no link underlines, motion only when the visitor allows it. RavanLine: body.is-ravanline swaps the
   tints for the warm accent like .ct-hero does. Prefix: .jn- */
.jn a { text-decoration: none; }
.jn a:hover, .jn a:focus-visible { text-decoration: none; }
.jn-hero { background: linear-gradient(180deg, var(--ds-mint) 0%, var(--ds-surface) 100%); border-block-end: 1px solid var(--ds-line); padding-block: var(--ds-space-6) var(--ds-space-10); }
body.is-ravanline .jn-hero { background: linear-gradient(180deg, var(--ds-accent-bg) 0%, var(--ds-surface) 100%); }
.jn-hero__row { display: flex; align-items: center; justify-content: space-between; gap: var(--ds-space-8); margin-block-start: var(--ds-space-4); }
.jn-hero__text { max-inline-size: 44rem; display: grid; gap: var(--ds-space-4); justify-items: start; }
.jn-hero h1 { font-size: clamp(1.75rem, 1.2rem + 2.6vw, 2.5rem); line-height: var(--ds-lh-tight); margin: 0; }
.jn-hero__lead { color: var(--ds-text-2); font-size: var(--ds-fs-lg); margin: 0; }
.jn-eyebrow { display: inline-flex; align-items: center; gap: var(--ds-space-2); margin: 0; padding: var(--ds-space-1) var(--ds-space-3); border-radius: var(--ds-radius-pill); background: var(--ds-surface); border: 1px solid var(--ds-line); color: var(--ds-deep); font-size: var(--ds-fs-sm); font-weight: var(--ds-fw-semibold); }
.jn-facts { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--ds-space-2); }
.jn-fact { display: inline-flex; align-items: center; gap: var(--ds-space-2); min-block-size: 2.5rem; padding: var(--ds-space-2) var(--ds-space-4); border-radius: 1.4rem; background: var(--ds-surface); border: 1px solid var(--ds-line); color: var(--ds-text); font-size: var(--ds-fs-sm); font-weight: var(--ds-fw-semibold); }
.jn-fact .ds-icon { color: var(--ds-action); flex: none; }
.jn-fact--zero { background: var(--ds-success-bg); border-color: var(--ds-success-line); color: var(--ds-success); }
.jn-fact--zero .ds-icon { color: var(--ds-success); }
.jn-fact--fee { background: var(--ds-accent-bg); border-color: var(--ds-line); color: var(--ds-accent); }
.jn-fact--fee .ds-icon { color: var(--ds-accent); }
.jn-hero__cta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ds-space-3) var(--ds-space-5); margin-block-start: var(--ds-space-2); }
.jn-hero__have { margin: 0; color: var(--ds-text-2); font-size: var(--ds-fs-sm); max-inline-size: 22rem; }
.jn-hero__art { display: none; inline-size: 8rem; block-size: 8rem; border-radius: 36px; background: var(--ds-surface); border: 1px solid var(--ds-line); color: var(--ds-action); box-shadow: var(--ds-shadow-card); flex: none; }
.jn-hero__art .ds-icon { inline-size: 3.5rem; block-size: 3.5rem; }
@media (min-width: 760px) { .jn-hero__art { display: inline-flex; } }
@media (max-width: 559.98px) { .jn-hero__cta .btn { inline-size: 100%; justify-content: center; } }

.jn-sec { padding-block: var(--ds-space-10); }
.jn-sec--tint { background: var(--ds-mint); }
body.is-ravanline .jn-sec--tint { background: var(--ds-accent-bg); }
.jn-sec__title { font-size: var(--ds-fs-2xl); line-height: var(--ds-lh-tight); margin: 0 0 var(--ds-space-6); }
@media (max-width: 559.98px) { .jn-sec { padding-block: var(--ds-space-8); } .jn-sec__title { font-size: var(--ds-fs-xl); } }

/* the way in: five steps. Phone = a vertical path, wide screens = one row joined by a dashed line */
.jn-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--ds-space-6); counter-reset: none; }
.jn-step { position: relative; display: grid; align-content: start; grid-template-columns: 3.25rem minmax(0, 1fr); column-gap: var(--ds-space-4); row-gap: var(--ds-space-1); align-items: start; }
.jn-step__icon { grid-row: 1 / span 2; inline-size: 3.25rem; block-size: 3.25rem; border-radius: 16px; position: relative; z-index: 1; }
.jn-step__num { position: absolute; inset-block-start: -0.35rem; inset-inline-start: -0.35rem; z-index: 2; display: inline-flex; align-items: center; justify-content: center; inline-size: 1.4rem; block-size: 1.4rem; border-radius: 50%; background: var(--ds-action); color: var(--ds-on-action); font-size: var(--ds-fs-xs); font-weight: var(--ds-fw-bold); line-height: 1; }
.jn-step__title { margin: 0; font-size: var(--ds-fs-md); line-height: var(--ds-lh-tight); align-self: end; }
.jn-step__desc { margin: 0; color: var(--ds-text-2); font-size: var(--ds-fs-sm); line-height: 1.8; }
.jn-step:not(:last-child)::before { content: ""; position: absolute; inset-inline-start: 1.625rem; inset-block: 3.5rem calc(var(--ds-space-6) * -1 + 0.25rem); inline-size: 0; border-inline-start: 2px dashed var(--ds-line); transform: translateX(-1px); }
[dir="rtl"] .jn-step:not(:last-child)::before { transform: translateX(1px); }
@media (min-width: 960px) {
	.jn-steps { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--ds-space-4); }
	.jn-step { grid-template-columns: 1fr; justify-items: center; text-align: center; row-gap: var(--ds-space-2); }
	.jn-step__icon { grid-row: auto; inline-size: 3.75rem; block-size: 3.75rem; }
	.jn-step__title { align-self: auto; }
	.jn-step__num { inset-block-start: -0.4rem; inset-inline-start: calc(50% - 2.45rem); }
	.jn-step:not(:last-child)::before { inset-block: 1.875rem auto; inset-inline: calc(50% + 2.4rem) calc(-50% + 2.4rem); block-size: 0; inline-size: auto; border-inline-start: 0; border-block-start: 2px dashed var(--ds-line); transform: none; }
	[dir="rtl"] .jn-step:not(:last-child)::before { transform: none; }
}

.jn-cards { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--ds-space-4); grid-template-columns: 1fr; }
@media (min-width: 640px) { .jn-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 960px) { .jn-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.jn-card { display: grid; align-content: start; gap: var(--ds-space-2); padding: var(--ds-space-5); background: var(--ds-surface); border: 1px solid var(--ds-line); border-radius: var(--ds-radius-card); }
.jn-card .ds-ibox { margin-block-end: var(--ds-space-1); }
.jn-card h3 { margin: 0; font-size: var(--ds-fs-md); }
.jn-card p { margin: 0; color: var(--ds-text-2); font-size: var(--ds-fs-sm); line-height: 1.8; }

/* what it costs: three plain rows, the session-money row carries the commission statement */
.jn-money { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--ds-space-3); max-inline-size: 52rem; }
.jn-money__row { display: grid; gap: var(--ds-space-2); padding: var(--ds-space-4) var(--ds-space-5); background: var(--ds-surface); border: 1px solid var(--ds-line); border-radius: var(--ds-radius-card); }
.jn-money__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--ds-space-1) var(--ds-space-4); }
.jn-money__head h3 { margin: 0; font-size: var(--ds-fs-md); }
.jn-money__value { margin: 0; color: var(--ds-deep); font-weight: var(--ds-fw-bold); font-size: var(--ds-fs-lg); }
.jn-money__value--soft { font-size: var(--ds-fs-md); color: var(--ds-text-2); font-weight: var(--ds-fw-semibold); }
.jn-money__row > p { margin: 0; color: var(--ds-text-2); font-size: var(--ds-fs-sm); line-height: 1.9; }
.jn-money__row--fee { border-color: var(--ds-action); box-shadow: inset 0 0 0 1px var(--ds-action); background: var(--ds-mint); }
body.is-ravanline .jn-money__row--fee { background: var(--ds-accent-bg); }
.jn-money__row--fee .jn-money__big { font-size: var(--ds-fs-3xl); line-height: 1; margin-inline-end: var(--ds-space-1); }
.jn-money__pay { display: grid; gap: var(--ds-space-1); margin-block-start: var(--ds-space-2); padding: var(--ds-space-3) var(--ds-space-4); border-radius: var(--ds-radius-control); background: var(--ds-surface); border: 1px solid var(--ds-line); }
.jn-money__pay p { margin: 0; }
.jn-money__value--pay { color: var(--ds-text); font-size: var(--ds-fs-md); }
.jn-money__paybig { font-size: var(--ds-fs-xl); font-weight: var(--ds-fw-bold); color: var(--ds-accent); margin-inline-end: var(--ds-space-1); }
.jn-money__row--fee .jn-money__label { font-size: var(--ds-fs-sm); font-weight: var(--ds-fw-semibold); color: var(--ds-text-2); }
.jn-money__row--fee > p { color: var(--ds-text); }
.jn-fold { margin-block-start: var(--ds-space-4); max-inline-size: 60rem; background: var(--ds-surface); border: 1px solid var(--ds-line); border-radius: var(--ds-radius-card); padding: 0 var(--ds-space-5); }
.jn-fold > summary, .jn-faq__item > summary { position: relative; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: var(--ds-space-3); min-block-size: 3rem; padding-block: var(--ds-space-3); cursor: pointer; font-weight: var(--ds-fw-semibold); color: var(--ds-text); }
.jn-fold > summary::-webkit-details-marker, .jn-faq__item > summary::-webkit-details-marker { display: none; }
.jn-fold > summary::after, .jn-faq__item > summary::after { content: ""; flex: none; inline-size: 0.6rem; block-size: 0.6rem; border-inline-end: 2px solid var(--ds-text-2); border-block-end: 2px solid var(--ds-text-2); transform: rotate(45deg); margin-inline-end: 0.2rem; }
.jn-fold[open] > summary::after, .jn-faq__item[open] > summary::after { transform: rotate(-135deg); }
.jn-fold > summary:focus-visible, .jn-faq__item > summary:focus-visible { outline: var(--ds-focus-width) solid var(--ds-focus); outline-offset: 2px; border-radius: var(--ds-radius-sm); }
.jn-fold .sub-explain { margin-block: 0 var(--ds-space-3); }
.jn-fold__more { margin: 0 0 var(--ds-space-4); }
.jn-fold__more a { font-weight: var(--ds-fw-semibold); color: var(--ds-deep); }
.jn-fold--inline { max-inline-size: none; padding: 0 var(--ds-space-4); margin-block: 0 var(--ds-space-5); background: var(--ds-bg); }
.jn-fold--inline[open] { padding-block-end: var(--ds-space-2); }

/* the form */
.jn-sec--apply { background: var(--ds-bg); }
.jn-apply { display: grid; gap: var(--ds-space-6); }
@media (min-width: 960px) { .jn-apply { grid-template-columns: minmax(0, 19rem) minmax(0, 1fr); gap: var(--ds-space-10); align-items: start; } }
.jn-aside { display: grid; gap: var(--ds-space-4); align-content: start; }
.jn-aside__title { margin: 0; font-size: var(--ds-fs-lg); }
.jn-ask { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--ds-space-3); }
.jn-ask li { display: flex; align-items: flex-start; gap: var(--ds-space-3); color: var(--ds-text); font-size: var(--ds-fs-sm); }
.jn-ask .ds-icon { flex: none; color: var(--ds-success); margin-block-start: 0.2em; }
.jn-aside__note { display: flex; align-items: flex-start; gap: var(--ds-space-2); margin: 0; padding: var(--ds-space-3) var(--ds-space-4); border-radius: var(--ds-radius-control); background: var(--ds-mint); color: var(--ds-text-2); font-size: var(--ds-fs-sm); }
body.is-ravanline .jn-aside__note { background: var(--ds-accent-bg); }
.jn-aside__note .ds-icon { flex: none; color: var(--ds-action); margin-block-start: 0.2em; }
.jn-formcard { scroll-margin-block-start: 5rem; background: var(--ds-surface); border: 1px solid var(--ds-line); border-radius: 20px; box-shadow: var(--ds-shadow-card); padding: var(--ds-space-5); min-inline-size: 0; }
@media (min-width: 640px) { .jn-formcard { padding: var(--ds-space-8); } }
.jn-form[hidden], .jn-done[hidden] { display: none; }
.jn-formhead h2 { margin: 0 0 var(--ds-space-1); font-size: var(--ds-fs-xl); }
.jn-formhead p { margin: 0; color: var(--ds-text-2); font-size: var(--ds-fs-sm); }

.jn-progress { list-style: none; margin: var(--ds-space-6) 0 var(--ds-space-2); padding: 0; display: flex; gap: var(--ds-space-2); }
.jn-progress__item { position: relative; flex: 1 1 0; display: flex; flex-direction: column; align-items: center; gap: var(--ds-space-2); text-align: center; color: var(--ds-text-2); font-size: var(--ds-fs-xs); font-weight: var(--ds-fw-semibold); }
.jn-progress__item::before { content: ""; position: absolute; inset-block-start: 1rem; inset-inline-start: calc(50% + 1.25rem); inset-inline-end: calc(-50% + 1.25rem); block-size: 2px; background: var(--ds-line); }
.jn-progress__item:last-child::before { display: none; }
.jn-progress__item.is-done::before { background: var(--ds-action); }
.jn-progress__dot { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; inline-size: 2rem; block-size: 2rem; border-radius: 50%; background: var(--ds-surface); border: 2px solid var(--ds-control-line); color: var(--ds-text-2); font-weight: var(--ds-fw-bold); font-size: var(--ds-fs-xs); }
.jn-progress__item.is-active { color: var(--ds-deep); }
.jn-progress__item.is-active .jn-progress__dot { background: var(--ds-action); border-color: var(--ds-action); color: var(--ds-on-action); }
.jn-progress__item.is-done .jn-progress__dot { background: var(--ds-mint-strong); border-color: var(--ds-action); color: var(--ds-deep); }
.jn-now { margin: 0 0 var(--ds-space-5); text-align: center; color: var(--ds-text-2); font-size: var(--ds-fs-sm); font-weight: var(--ds-fw-semibold); }
@media (max-width: 559.98px) { .jn-progress__label { display: none; } }
@media (min-width: 560px) { .jn-now { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; margin: -1px; } .jn-progress { margin-block-end: var(--ds-space-6); } }

.jn-pane { display: grid; gap: var(--ds-space-1); }
.jn-pane[hidden] { display: none; }
.jn-pane__title { margin: 0; font-size: var(--ds-fs-xl); line-height: var(--ds-lh-tight); }
.jn-pane__title:focus { outline: none; }
.jn-pane__title:focus-visible { outline: var(--ds-focus-width) solid var(--ds-focus); outline-offset: 4px; border-radius: var(--ds-radius-sm); }
.jn-pane__desc { margin: 0 0 var(--ds-space-4); color: var(--ds-text-2); font-size: var(--ds-fs-sm); }
.jn-form .ds-field { margin: 0 0 var(--ds-space-4); }
.jn-form .ds-field input:not([type="radio"]):not([type="checkbox"]):not([type="file"]):not([data-phone-number]), .jn-form .ds-field select, .jn-form .ds-field textarea { inline-size: 100%; min-block-size: var(--ds-control-h); }
.jn-form .ds-field textarea { min-block-size: 9rem; }
.jn-form .ds-field [aria-invalid="true"], .jn-form .mentayar-phone-row input[aria-invalid="true"] { border-color: var(--ds-danger) !important; border-width: 2px; }
.jn-form .mentayar-phone-row { flex-wrap: nowrap; }
.jn-form .mentayar-phone-row .dial-code-wrap { min-block-size: var(--ds-control-h); }
.jn-form .ds-field__label--sub { font-weight: var(--ds-fw-regular); color: var(--ds-text-2); }
.jn-grid2, .jn-grid3 { display: grid; gap: 0 var(--ds-space-4); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 560px) { .jn-grid2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 720px) { .jn-grid3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.jn-fieldset { border: 0; padding: 0; margin: 0 0 var(--ds-space-5); min-inline-size: 0; }
.jn-fieldset legend { padding: 0; margin-block-end: var(--ds-space-2); }
.jn-hint { margin: 0 0 var(--ds-space-3); color: var(--ds-text-2); font-size: var(--ds-fs-sm); }
.jn-hint--tight { margin-block: calc(var(--ds-space-2) * -1) var(--ds-space-4); }
.jn-count { display: block; margin-block-start: var(--ds-space-1); text-align: end; color: var(--ds-text-2); font-size: var(--ds-fs-xs); font-variant-numeric: tabular-nums; }
.jn-chips { display: flex; flex-wrap: wrap; gap: var(--ds-space-2); }
.jn-chip { position: relative; display: block; }
.jn-chip input { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; margin: 0; opacity: 0; cursor: pointer; z-index: 1; }
.jn-chip__box { display: inline-flex; align-items: center; min-block-size: var(--ds-control-h); padding: var(--ds-space-2) var(--ds-space-4); border: 1px solid var(--ds-control-line); border-radius: var(--ds-radius-pill); background: var(--ds-surface); color: var(--ds-text); font-size: var(--ds-fs-sm); font-weight: var(--ds-fw-medium); }
.jn-chip:hover .jn-chip__box { border-color: var(--ds-deep); background: var(--ds-mint); }
.jn-chip input:checked + .jn-chip__box { border-color: var(--ds-action); box-shadow: inset 0 0 0 1px var(--ds-action); background: var(--ds-mint-strong); color: var(--ds-deep); font-weight: var(--ds-fw-semibold); }
.jn-chip input:focus-visible + .jn-chip__box { outline: var(--ds-focus-width) solid var(--ds-focus); outline-offset: 2px; }
.jn-chip input[aria-invalid="true"] + .jn-chip__box { border-color: var(--ds-danger); }

/* documents: a drop zone per slot; once a file is chosen the zone is replaced by its name, size and remove / change */
.jn-docs { display: grid; gap: var(--ds-space-3); grid-template-columns: 1fr; margin-block-end: var(--ds-space-3); }
@media (min-width: 680px) { .jn-docs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.jn-drop { position: relative; min-inline-size: 0; }
.jn-drop__input { position: absolute; inline-size: 1px; block-size: 1px; opacity: 0; overflow: hidden; }
.jn-drop__zone { display: flex; align-items: center; gap: var(--ds-space-3); min-block-size: 5.5rem; padding: var(--ds-space-3) var(--ds-space-4); background: var(--ds-surface); border: 2px dashed var(--ds-control-line); border-radius: var(--ds-radius-card); cursor: pointer; }
.jn-drop__zone[hidden], .jn-drop__file[hidden] { display: none; }
.jn-drop__zone:hover, .jn-drop__zone.is-over { border-color: var(--ds-action); background: var(--ds-mint); }
.jn-drop__input:focus-visible + .jn-drop__zone { outline: var(--ds-focus-width) solid var(--ds-focus); outline-offset: 2px; }
.jn-drop__icon { flex: none; inline-size: 2.75rem; block-size: 2.75rem; border-radius: 13px; }
.jn-drop__text { display: grid; gap: 2px; min-inline-size: 0; }
.jn-drop__text strong { font-size: var(--ds-fs-sm); }
.jn-drop__hint { color: var(--ds-text-2); font-size: var(--ds-fs-xs); }
.jn-drop__cta { color: var(--ds-deep); font-size: var(--ds-fs-sm); font-weight: var(--ds-fw-semibold); }
.jn-drop__file { display: flex; align-items: center; gap: var(--ds-space-3); flex-wrap: wrap; min-block-size: 5.5rem; padding: var(--ds-space-3) var(--ds-space-4); background: var(--ds-mint); border: 2px solid var(--ds-action); border-radius: var(--ds-radius-card); }
body.is-ravanline .jn-drop__file { background: var(--ds-accent-bg); }
.jn-drop__thumb { flex: none; display: inline-flex; align-items: center; justify-content: center; inline-size: 3.25rem; block-size: 3.25rem; border-radius: var(--ds-radius-control); overflow: hidden; background: var(--ds-surface); border: 1px solid var(--ds-line); }
.jn-drop__thumb img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.jn-drop__pdf { color: var(--ds-danger); font-weight: var(--ds-fw-bold); font-size: var(--ds-fs-xs); }
.jn-drop__meta { display: grid; gap: 2px; flex: 1 1 8rem; min-inline-size: 0; }
.jn-drop__meta strong { font-size: var(--ds-fs-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; direction: ltr; text-align: start; unicode-bidi: plaintext; }
.jn-drop__meta span { color: var(--ds-text-2); font-size: var(--ds-fs-xs); }
.jn-drop__btns { display: inline-flex; gap: var(--ds-space-1); }
.jn-linkbtn { display: inline-flex; align-items: center; min-block-size: 2.75rem; padding: 0 var(--ds-space-2); background: none; border: 0; color: var(--ds-action); font: inherit; font-size: var(--ds-fs-sm); font-weight: var(--ds-fw-semibold); text-decoration: none; cursor: pointer; border-radius: var(--ds-radius-sm); }
.jn-linkbtn:hover { color: var(--ds-action-hover); text-decoration: none; }
.jn-linkbtn:focus-visible { outline: var(--ds-focus-width) solid var(--ds-focus); outline-offset: 2px; }
.jn-linkbtn--danger { color: var(--ds-danger); }
.jn-linkbtn--danger:hover { color: var(--ds-danger-hover); }
.jn-drop .ds-field__error { margin-block-start: var(--ds-space-2); }

/* review step */
.jn-sum { display: grid; gap: var(--ds-space-3); margin-block-end: var(--ds-space-4); }
.jn-sum__group { padding: var(--ds-space-3) var(--ds-space-4); border: 1px solid var(--ds-line); border-radius: var(--ds-radius-card); background: var(--ds-bg); }
.jn-sum__head { display: flex; align-items: center; justify-content: space-between; gap: var(--ds-space-3); }
.jn-sum__head h4 { margin: 0; font-size: var(--ds-fs-md); }
.jn-sum dl { display: grid; grid-template-columns: minmax(6rem, 10rem) minmax(0, 1fr); gap: var(--ds-space-1) var(--ds-space-4); margin: 0; }
.jn-sum dt { color: var(--ds-text-2); font-size: var(--ds-fs-sm); }
.jn-sum dd { margin: 0; color: var(--ds-text); font-size: var(--ds-fs-sm); overflow-wrap: anywhere; }
.jn-sum dd.is-empty { color: var(--ds-text-2); }
.jn-sum__bio { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 6; line-clamp: 6; overflow: hidden; white-space: pre-line; }
@media (max-width: 479.98px) { .jn-sum dl { grid-template-columns: minmax(0, 1fr); } .jn-sum dd { margin-block-end: var(--ds-space-2); } }
.jn-privacy { display: flex; align-items: flex-start; gap: var(--ds-space-2); margin: 0 0 var(--ds-space-4); padding: var(--ds-space-3) var(--ds-space-4); border-radius: var(--ds-radius-control); background: var(--ds-mint); color: var(--ds-text-2); font-size: var(--ds-fs-sm); }
body.is-ravanline .jn-privacy { background: var(--ds-accent-bg); }
.jn-privacy .ds-icon { flex: none; color: var(--ds-action); margin-block-start: 0.2em; }
.jn-privacy a { color: var(--ds-deep); font-weight: var(--ds-fw-semibold); }
.jn-status { margin: 0 0 var(--ds-space-3); }
.jn-status:empty { display: none; }
.jn-status.is-error { padding: var(--ds-space-3) var(--ds-space-4); border-radius: var(--ds-radius-control); background: var(--ds-danger-bg); border: 1px solid var(--ds-danger-line); color: var(--ds-danger); font-weight: var(--ds-fw-semibold); }
.jn-actions { display: flex; align-items: center; justify-content: space-between; gap: var(--ds-space-3); margin-block-start: var(--ds-space-5); }
.jn-actions .btn { min-inline-size: 9rem; justify-content: center; }
@media (max-width: 559.98px) { .jn-actions { flex-direction: column-reverse; align-items: stretch; } .jn-actions .btn { inline-size: 100%; } .jn-actions > span { display: none; } }
.jn-draft { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--ds-space-1) var(--ds-space-3); margin: var(--ds-space-5) 0 0; color: var(--ds-text-2); font-size: var(--ds-fs-xs); }

/* success */
.jn-done { display: grid; justify-items: center; text-align: center; gap: var(--ds-space-3); padding-block: var(--ds-space-4); }
.jn-done h2 { margin: 0; font-size: var(--ds-fs-2xl); }
.jn-done h2:focus { outline: none; }
.jn-done__lead { margin: 0; color: var(--ds-text-2); max-inline-size: 30rem; }
.jn-done__next { inline-size: 100%; max-inline-size: 34rem; text-align: start; padding: var(--ds-space-4) var(--ds-space-5); border-radius: var(--ds-radius-card); background: var(--ds-mint); }
body.is-ravanline .jn-done__next { background: var(--ds-accent-bg); }
.jn-done__next h3 { margin: 0 0 var(--ds-space-2); font-size: var(--ds-fs-md); }
html[lang^="fa"] .jn-done__next ol { list-style-type: persian; }
.jn-done__next ol { margin: 0; padding-inline-start: 1.4rem; display: grid; gap: var(--ds-space-2); color: var(--ds-text); font-size: var(--ds-fs-sm); }
.jn-done__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--ds-space-3); margin-block-start: var(--ds-space-2); }
.jn-done__actions [hidden] { display: none; }

.jn-faq-wrap { max-inline-size: 52rem; }
.jn-faq { display: grid; gap: var(--ds-space-2); }
.jn-faq__item { background: var(--ds-surface); border: 1px solid var(--ds-line); border-radius: var(--ds-radius-card); padding: 0 var(--ds-space-5); }
.jn-faq__item p { margin: 0 0 var(--ds-space-4); color: var(--ds-text-2); font-size: var(--ds-fs-sm); line-height: 1.9; }

@media (prefers-reduced-motion: no-preference) {
	.jn-pane:not([hidden]) { animation: jn-in var(--ds-dur) var(--ds-ease) both; }
	.jn-card, .jn-chip__box, .jn-drop__zone, .jn-fact { transition: border-color var(--ds-dur) var(--ds-ease), box-shadow var(--ds-dur) var(--ds-ease), background-color var(--ds-dur) var(--ds-ease), transform var(--ds-dur) var(--ds-ease); }
	.jn-card:hover { transform: translateY(-2px); box-shadow: var(--ds-shadow-card); }
	@keyframes jn-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
}
@media (forced-colors: active) {
	.jn-chip input:checked + .jn-chip__box { outline: 2px solid Highlight; }
	.jn-progress__item.is-active .jn-progress__dot { outline: 2px solid Highlight; }
}
/* ---- END join page ---- */

/* ---- Home hero: the "confidential and secure" chip hangs on the end edge like the "active therapists" chip, clear of the card footer (2026-10-18) ---- */
.home-hero__chip--3 { bottom: 20%; inset-inline-end: -8px; }
@media (max-width: 640px) { .home-hero__chip--3 { bottom: 22%; inset-inline-end: 0; } }
/* Spotlight footer: the hint may break onto a second line («به انتخاب شما») and the button stays on ONE line, a little wider */
.home-spotlight__hint { white-space: pre-line; }
.home-spotlight__footer { flex-wrap: wrap; }
.home-spotlight__footer .btn { white-space: nowrap; flex: none; min-inline-size: 10.5rem; padding-inline: 1.25rem; justify-content: center; }

/* ---- BEGIN bank receipt, web client (2026-10-19, agent: bank-receipt web) ----
   Paying by bank transfer with a receipt: the payment tab (explainer, account details, receipt form), the full status page and the
   dashboard cards. Markup: assets/js/ds/bank-receipt.js. --ds-* tokens, logical properties, 44px targets; RTL / LTR and both brands
   (body.is-ravanline re-points the tokens) need nothing special. */
.bankr-card { display: grid; gap: var(--ds-space-4); min-inline-size: 0; }
.bankr-h { margin: 0; font-size: var(--ds-fs-lg); line-height: var(--ds-lh-tight); color: var(--ds-text); }
.bankr-h:focus { outline: none; }
.bankr-sub { margin: var(--ds-space-2) 0 0; font-size: var(--ds-fs-md); color: var(--ds-text-2); font-weight: var(--ds-fw-semibold); }
.bankr-lead, .bankr-hint { margin: 0; color: var(--ds-text-2); font-size: var(--ds-fs-sm); }
.bankr-note { display: flex; align-items: flex-start; gap: var(--ds-space-2); margin: 0; padding: var(--ds-space-3) var(--ds-space-4); border-radius: var(--ds-radius-control); background: var(--ds-mint); color: var(--ds-text-2); font-size: var(--ds-fs-sm); }
.bankr-note .ds-icon { flex: none; margin-block-start: 0.15em; color: var(--ds-action); }
.bankr-note--outside { margin-block: 0 var(--ds-space-3); }
.bankr-instructions { margin: 0; color: var(--ds-text-2); font-size: var(--ds-fs-sm); white-space: pre-line; overflow-wrap: anywhere; }
.bankr-link { display: inline-flex; align-items: center; justify-content: center; gap: var(--ds-space-1); min-block-size: var(--ds-control-h); padding-inline: var(--ds-space-3); background: transparent; border: 0; border-radius: var(--ds-radius-control); color: var(--ds-deep); font: inherit; font-size: var(--ds-fs-sm); font-weight: var(--ds-fw-semibold); text-decoration: none; cursor: pointer; }
.bankr-link:focus-visible { outline: var(--ds-focus-width) solid var(--ds-focus); outline-offset: var(--ds-focus-offset); }
.bankr-links { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--ds-space-1) var(--ds-space-3); }
.bankr-actions { display: grid; gap: var(--ds-space-2); }

/* the three steps (reuses .simple-steps): a step that needs attention is amber, never red on its own */
.bankr-steps { max-inline-size: 26rem; margin-inline: auto; inline-size: 100%; margin-block-end: 0; }
.bankr-steps--warn .simple-steps__item[aria-current="step"] .simple-steps__dot { background: var(--ds-warning-bg); border-color: var(--ds-warning); color: var(--ds-warning); box-shadow: 0 0 0 4px var(--ds-warning-bg); }
.bankr-steps--warn .simple-steps__item[aria-current="step"] { color: var(--ds-warning); }

/* intro: how it works */
.bankr-how { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--ds-space-3); }
.bankr-how li { display: flex; align-items: center; gap: var(--ds-space-3); }
.bankr-how__t { display: grid; gap: 2px; min-inline-size: 0; }
.bankr-how__t strong { color: var(--ds-text); font-size: var(--ds-fs-md); }
.bankr-how__t span { color: var(--ds-text-2); font-size: var(--ds-fs-sm); }

/* the exact amount */
.bankr-amount { display: grid; gap: var(--ds-space-1); padding: var(--ds-space-4); border-radius: var(--ds-radius-card); background: var(--ds-mint); border: 1px solid var(--ds-mint-strong); }
.bankr-amount--soft { background: transparent; border-color: var(--ds-line); }
.bankr-amount__label { color: var(--ds-text-2); font-size: var(--ds-fs-sm); }
.bankr-amount__line, .bankr-amount__alt { display: flex; align-items: center; justify-content: space-between; gap: var(--ds-space-3); flex-wrap: wrap; }
.bankr-amount__value { font-size: var(--ds-fs-3xl); line-height: 1.2; color: var(--ds-deep); font-weight: var(--ds-fw-bold, 700); overflow-wrap: anywhere; }
.bankr-amount__alt { color: var(--ds-text-2); font-size: var(--ds-fs-sm); }

/* account cards with a copy button on every value */
.bankr-dest { display: grid; gap: var(--ds-space-2); padding: var(--ds-space-4); border: 1px solid var(--ds-line); border-radius: var(--ds-radius-card); background: var(--ds-surface); min-inline-size: 0; }
.bankr-dest__head { display: flex; align-items: center; gap: var(--ds-space-3); }
.bankr-dest__head > div { display: grid; gap: 1px; min-inline-size: 0; }
.bankr-dest__head strong { font-size: var(--ds-fs-md); color: var(--ds-text); overflow-wrap: anywhere; }
.bankr-dest__head span { font-size: var(--ds-fs-sm); color: var(--ds-text-2); overflow-wrap: anywhere; }
.bankr-dest__note { margin: 0; font-size: var(--ds-fs-sm); color: var(--ds-text-2); }
.bankr-rows { display: grid; gap: var(--ds-space-2); }
.bankr-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "label label" "value copy"; align-items: center; gap: 0 var(--ds-space-3); padding-block: var(--ds-space-2); border-block-start: 1px dashed var(--ds-line); }
.bankr-row:first-child { border-block-start: 0; }
.bankr-row__label { grid-area: label; font-size: var(--ds-fs-xs); color: var(--ds-text-2); }
.bankr-row__value { grid-area: value; font-size: var(--ds-fs-lg); letter-spacing: 0.03em; font-variant-numeric: tabular-nums; color: var(--ds-text); overflow-wrap: anywhere; word-break: break-all; unicode-bidi: isolate; text-align: start; }
.bankr-row .bankr-copy { grid-area: copy; }
.bankr-copy { gap: var(--ds-space-1); min-inline-size: var(--ds-control-h); flex: none; }
.bankr-copy.is-copied { color: var(--ds-success); }
.bankr-code { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--ds-space-1) var(--ds-space-3); padding: var(--ds-space-4); border: 1px dashed var(--ds-action); border-radius: var(--ds-radius-card); background: var(--ds-surface); }
.bankr-code__label { display: block; font-size: var(--ds-fs-sm); color: var(--ds-text-2); }
.bankr-code__value { display: block; font-size: var(--ds-fs-2xl); letter-spacing: 0.08em; color: var(--ds-deep); font-variant-numeric: tabular-nums; }
.bankr-code__hint { grid-column: 1 / -1; margin: 0; font-size: var(--ds-fs-sm); color: var(--ds-text-2); }
.bankr-tip summary, .bankr-again summary { min-block-size: var(--ds-control-h); }

/* the receipt form */
.bankr-form .ds-field { margin: 0; }
.bankr-two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--ds-space-3); }
.bankr-two .jdp { inline-size: 100%; }
.bankr-unit { display: flex; align-items: stretch; gap: var(--ds-space-2); }
.bankr-unit input { flex: 1 1 auto; min-inline-size: 0; }
.bankr-unit__u { display: inline-flex; align-items: center; padding-inline: var(--ds-space-3); border-radius: var(--ds-radius-control); background: var(--ds-mint); color: var(--ds-deep); font-weight: var(--ds-fw-semibold); white-space: nowrap; }
.bankr-form input[type="time"] { inline-size: 100%; min-block-size: var(--ds-control-h); }
.bankr-drop { position: relative; }
.bankr-drop[hidden] { display: none; }
.bankr-drop__input { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; opacity: 0; cursor: pointer; z-index: 1; padding: 0; }
.bankr-drop__zone { display: grid; justify-items: center; gap: var(--ds-space-1); padding: var(--ds-space-5) var(--ds-space-4); text-align: center; border: 2px dashed var(--ds-control-line); border-radius: var(--ds-radius-card); background: var(--ds-mint); color: var(--ds-text-2); font-size: var(--ds-fs-sm); transition: border-color var(--ds-dur) var(--ds-ease), background-color var(--ds-dur) var(--ds-ease); }
.bankr-drop__zone > .ds-icon { color: var(--ds-action); }
.bankr-drop__zone strong { color: var(--ds-text); font-size: var(--ds-fs-md); }
.bankr-drop__btn { pointer-events: none; margin-block-start: var(--ds-space-1); }
.bankr-drop:hover .bankr-drop__zone, .bankr-drop.is-over .bankr-drop__zone { border-color: var(--ds-action); background: var(--ds-mint-strong); }
.bankr-drop:focus-within .bankr-drop__zone { outline: var(--ds-focus-width) solid var(--ds-focus); outline-offset: var(--ds-focus-offset); }
.bankr-chosen { display: flex; align-items: center; justify-content: space-between; gap: var(--ds-space-3); flex-wrap: wrap; padding: var(--ds-space-3); border: 1px solid var(--ds-line); border-radius: var(--ds-radius-card); background: var(--ds-surface); }
.bankr-chosen[hidden] { display: none; }
.bankr-chosen__main { display: flex; align-items: center; gap: var(--ds-space-3); min-inline-size: 0; flex: 1 1 12rem; }
.bankr-chosen__img { inline-size: 4.5rem; block-size: 4.5rem; object-fit: cover; border-radius: var(--ds-radius-control); border: 1px solid var(--ds-line); background: var(--ds-mint); flex: none; }
.bankr-chosen__icon { display: inline-flex; align-items: center; justify-content: center; inline-size: 4.5rem; block-size: 4.5rem; border-radius: var(--ds-radius-control); background: var(--ds-mint); color: var(--ds-action); flex: none; }
.bankr-chosen__meta { display: grid; gap: 2px; min-inline-size: 0; }
.bankr-chosen__meta strong { overflow-wrap: anywhere; font-size: var(--ds-fs-sm); }
.bankr-chosen__meta span { color: var(--ds-text-2); font-size: var(--ds-fs-xs); }
.bankr-chosen__acts { display: flex; gap: var(--ds-space-2); flex-wrap: wrap; }
.bankr-pick { border: 0; padding: 0; margin: 0; display: grid; gap: var(--ds-space-2); min-inline-size: 0; }
.bankr-pick__opt { display: flex; align-items: center; gap: var(--ds-space-3); padding: var(--ds-space-3); border: 1px solid var(--ds-control-line); border-radius: var(--ds-radius-control); background: var(--ds-surface); cursor: pointer; min-block-size: var(--ds-control-h); }
.bankr-pick__opt > span { display: flex; align-items: center; gap: var(--ds-space-2); }
.bankr-pick__opt:has(input:checked) { border-color: var(--ds-action); background: var(--ds-mint); box-shadow: 0 0 0 1px var(--ds-action); }
.bankr-pick__opt:focus-within { outline: var(--ds-focus-width) solid var(--ds-focus); outline-offset: var(--ds-focus-offset); }

/* status page */
.bankr-hero { display: flex; align-items: center; gap: var(--ds-space-4); }
.bankr-hero > div { min-inline-size: 0; }
.bankr-hero p { margin: var(--ds-space-1) 0 0; color: var(--ds-text-2); }
.bankr-facts { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--ds-space-2); }
.bankr-facts li { display: flex; align-items: flex-start; gap: var(--ds-space-2); padding: var(--ds-space-3); border-radius: var(--ds-radius-control); background: var(--ds-mint); font-size: var(--ds-fs-sm); color: var(--ds-text); }
.bankr-facts li .ds-icon { flex: none; margin-block-start: 0.1em; color: var(--ds-action); }
.bankr-facts__warn { background: var(--ds-warning-bg) !important; }
.bankr-facts__warn .ds-icon { color: var(--ds-warning) !important; }

/* dashboard cards */
.bankr-cards { display: grid; gap: var(--ds-space-3); margin-block-end: var(--ds-space-5); }
.bankr-cards__title { display: flex; align-items: center; gap: var(--ds-space-2); margin: 0; font-size: var(--ds-fs-lg); }
.bankr-cards__list { display: grid; gap: var(--ds-space-3); }
.bankr-dcard { display: grid; gap: var(--ds-space-3); padding: var(--ds-space-4); }
.bankr-dcard__top { display: flex; align-items: center; gap: var(--ds-space-3); flex-wrap: wrap; }
.bankr-dcard__who { display: grid; gap: 2px; min-inline-size: 0; flex: 1 1 10rem; }
.bankr-dcard__who strong { overflow-wrap: anywhere; }
.bankr-dcard__when { color: var(--ds-text-2); font-size: var(--ds-fs-sm); }
.bankr-dcard__amount { display: flex; align-items: baseline; justify-content: space-between; gap: var(--ds-space-3); flex-wrap: wrap; margin: 0; }
.bankr-dcard__amount strong { font-size: var(--ds-fs-xl); color: var(--ds-deep); }
.bankr-dcard__code { color: var(--ds-text-2); font-size: var(--ds-fs-xs); }
.bankr-dcard__line { margin: 0; color: var(--ds-text-2); font-size: var(--ds-fs-sm); }
.bankr-dcard--rejected { border-color: var(--ds-danger-line); }
.bankr-dcard--refund_needed, .bankr-dcard--expired { border-color: var(--ds-warning-line); }
.bankr-dcard .bankr-steps { max-inline-size: 22rem; }
/* «پرداخت‌ها»: the client's bank transfers with every receipt they sent (owner 2026-10-26) */
.bankr-hist { display: grid; gap: var(--ds-space-3); margin-block-end: var(--ds-space-6); }
.bankr-hist > .client-muted { margin: 0; }
.bankr-hist__list { display: grid; gap: var(--ds-space-3); }
.bankr-hist__item { display: grid; gap: var(--ds-space-3); padding: var(--ds-space-4); min-inline-size: 0; }
.bankr-hsubs { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--ds-space-2); }
.bankr-hsub { display: flex; align-items: flex-start; gap: var(--ds-space-3); padding: var(--ds-space-3); border: 1px solid var(--ds-line); border-radius: var(--ds-radius-control); background: var(--ds-surface); min-inline-size: 0; }
.bankr-hsub--rejected { border-color: var(--ds-danger-line); }
.bankr-hsub--approved { border-color: var(--ds-success-line); }
.bankr-hsub__thumb { flex: none; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; inline-size: 4.5rem; block-size: 4.5rem; border-radius: var(--ds-radius-control); background: var(--ds-mint); color: var(--ds-action); overflow: hidden; text-decoration: none; font-size: var(--ds-fs-xs); font-weight: 700; }
.bankr-hsub__thumb img { inline-size: 100%; block-size: 100%; object-fit: cover; display: block; }
.bankr-hsub__thumb--none { color: var(--ds-text-2); background: var(--ds-mint); }
.bankr-hsub__body { display: grid; gap: var(--ds-space-1); min-inline-size: 0; flex: 1 1 auto; }
.bankr-hsub__head { display: flex; align-items: center; justify-content: space-between; gap: var(--ds-space-2); flex-wrap: wrap; }
.bankr-hsub__meta, .bankr-hsub__why, .bankr-hsub__gone { margin: 0; font-size: var(--ds-fs-sm); color: var(--ds-text-2); overflow-wrap: anywhere; }
.bankr-hsub__why { color: var(--ds-danger); }
.bankr-hsub__acts { display: flex; gap: var(--ds-space-2); flex-wrap: wrap; margin-block-start: var(--ds-space-1); }

@media (max-width: 479.98px) {
	.bankr-two { grid-template-columns: minmax(0, 1fr); }
	.bankr-amount__value { font-size: var(--ds-fs-2xl); }
	.bankr-code__value { font-size: var(--ds-fs-xl); }
}
@media (min-width: 900px) {
	.bankr-cards__list { grid-template-columns: repeat(auto-fill, minmax(22rem, 1fr)); }
}
@media (forced-colors: active) {
	.bankr-pick__opt:has(input:checked) { outline: 2px solid Highlight; }
	.bankr-drop__zone { border-color: CanvasText; }
}
/* ---- END bank receipt, web client ---- */

/* ---- tests page: built-in questionnaires + «coming soon» (launch polish 2026-10-21, page-templates/template-tests-catalog.php) ---- */
.tests-catalog__free { display: grid; gap: var(--ds-space-3); margin-block: var(--ds-space-6) var(--ds-space-8); }
.tests-catalog__section-title { margin: var(--ds-space-6) 0 0; font-size: var(--ds-fs-xl); }
.tests-catalog__free .tests-catalog__section-title { margin-block-start: 0; }
.tests-catalog__section-lead { margin: 0; color: var(--ds-text-2); }
/* every questionnaire is shown here (the home row stops at four) */
@media (min-width: 900px) { .tests-catalog__free .ds-tilecards > :nth-child(n+5) { display: flex; } }
.tests-catalog__soon { display: grid; justify-items: center; gap: var(--ds-space-3); max-inline-size: 34rem; margin: var(--ds-space-8) auto; padding: var(--ds-space-8) var(--ds-space-4); text-align: center; }
.tests-catalog__soon h2 { margin: 0; font-size: var(--ds-fs-xl); }
.tests-catalog__soon p { margin: 0; color: var(--ds-text-2); }
/* ---- END tests page ---- */

/* ---- counseling area page /counseling/<area>/ (owner, 2026-10-21: page redesign; taxonomy-mentayar_area.php) ----
   Hero in the area's own colour family (.ds-f-<family> on .ar-hero sets --ds-f-bg / --ds-f-ink, the same pair as its home tile),
   signs as cards beside a «when to seek help» card, this area's specialists, FAQ (pub-faq items), other areas as tiles, closing banner. */
.ar-hero { padding-block: var(--ds-space-4) var(--ds-space-10); }
.ar-hero__row { display: grid; gap: var(--ds-space-8); align-items: center; margin-block-start: var(--ds-space-4); }
@media (min-width: 900px) { .ar-hero__row { grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.65fr); gap: var(--ds-space-12); } }
.ar-hero__text { display: grid; gap: var(--ds-space-4); justify-items: start; }
.ar-hero__eyebrow { display: inline-flex; align-items: center; gap: var(--ds-space-2); padding: var(--ds-space-1) var(--ds-space-3); border-radius: var(--ds-radius-pill); background: var(--ds-f-bg); color: var(--ds-f-ink); font-size: var(--ds-fs-sm); font-weight: var(--ds-fw-bold); }
.ar-hero__title { margin: 0; font-size: clamp(2rem, 1.4rem + 2.6vw, 3.1rem); font-weight: 800; line-height: 1.3; }
.ar-hero__lead { margin: 0; max-inline-size: 38rem; color: var(--ds-text-2); font-size: var(--ds-fs-lg); line-height: 1.9; }
.ar-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ds-space-3) var(--ds-space-5); margin-block-start: var(--ds-space-1); }
.ar-hero__actions .ds-btn { gap: var(--ds-space-2); }
.ar-hero__facts { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--ds-space-2); }
.ar-hero__facts li { display: inline-flex; align-items: center; gap: 0.4rem; min-block-size: 2.25rem; padding-inline: var(--ds-space-3); border: 1px solid var(--ds-line); border-radius: var(--ds-radius-pill); background: var(--ds-surface); font-size: var(--ds-fs-xs); font-weight: var(--ds-fw-semibold); }
.ar-hero__facts .ds-icon { color: var(--ds-action); }
.ar-hero__visual { position: relative; display: none; inline-size: 100%; max-inline-size: 20rem; aspect-ratio: 1; justify-self: center; }
@media (min-width: 900px) { .ar-hero__visual { display: grid; place-items: center; } }
.ar-hero__visual::before { content: ""; position: absolute; inset: 6%; border-radius: 50%; background: var(--ds-f-bg); }
.ar-hero__visual::after { content: ""; position: absolute; inset: -2%; border-radius: 50%; border: 2px dashed var(--ds-f-bg); }
.ar-hero__badge { position: relative; z-index: 1; display: grid; place-items: center; inline-size: 9.5rem; block-size: 9.5rem; border-radius: 40px; background: var(--ds-surface); color: var(--ds-f-ink); box-shadow: var(--ds-shadow-card); transform: rotate(-6deg); }
.ar-hero__badge .ds-icon { transform: rotate(6deg); }
.ar-hero__faces { position: absolute; z-index: 2; inset-block-end: 6%; inset-inline-start: 50%; transform: translateX(50%); display: flex; padding: 0.3rem; border-radius: var(--ds-radius-pill); background: var(--ds-surface); box-shadow: var(--ds-shadow-card); }
html[dir="ltr"] .ar-hero__faces { transform: translateX(-50%); }
.ar-face { display: grid; place-items: center; inline-size: 2.75rem; block-size: 2.75rem; border-radius: 50%; overflow: hidden; border: 2px solid var(--ds-surface); background: var(--ds-f-bg); color: var(--ds-f-ink); font-weight: var(--ds-fw-bold); }
.ar-face + .ar-face { margin-inline-start: -0.6rem; }
.ar-face img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.ar-hero__count { position: absolute; z-index: 2; inset-block-start: 8%; inset-inline-end: -4%; padding: var(--ds-space-2) var(--ds-space-3); border-radius: var(--ds-radius-pill); background: var(--ds-surface); box-shadow: var(--ds-shadow-card); font-size: var(--ds-fs-xs); font-weight: var(--ds-fw-bold); white-space: nowrap; }

.area-detail { display: grid; gap: var(--ds-space-5); margin-block: 0 var(--ds-space-12); }
@media (min-width: 960px) {
	.area-detail { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); align-items: start; gap: var(--ds-space-6); }
	.area-detail--single { grid-template-columns: minmax(0, 1fr); }
	.area-detail .area-when { position: sticky; inset-block-start: calc(var(--ds-header-h) + var(--ds-space-4)); }
}
.area-sechead { display: flex; align-items: center; gap: var(--ds-space-3); margin-block-end: var(--ds-space-5); }
.area-sechead h2 { margin: 0; font-size: var(--ds-fs-xl); line-height: var(--ds-lh-tight); }
.area-sechead p { margin: var(--ds-space-1) 0 0; color: var(--ds-text-2); font-size: var(--ds-fs-sm); }
.area-sechead .ds-ibox { flex: none; }
.area-signs { background: var(--ds-surface); border: 1px solid var(--ds-line); border-radius: 20px; padding: var(--ds-space-6); }
.area-signs__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--ds-space-3); }
@media (min-width: 640px) { .area-signs__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.area-sign { display: flex; align-items: flex-start; gap: var(--ds-space-3); padding: var(--ds-space-4); background: var(--ds-bg); border: 1px solid var(--ds-line); border-radius: 16px; line-height: 1.7; }
.area-sign__mark { flex: none; display: inline-grid; place-items: center; inline-size: 2rem; block-size: 2rem; border-radius: 10px; background: var(--ds-f-teal-bg); color: var(--ds-f-teal-ink); }
.area-signs__text p:last-child { margin-block-end: 0; }
.area-when { display: grid; gap: var(--ds-space-3); justify-items: start; padding: var(--ds-space-6); border-radius: 20px; background: var(--ds-grad-brand); color: #fff; --ds-focus: var(--ds-focus-on-dark); position: relative; overflow: hidden; isolation: isolate; }
.area-when::after { content: ""; position: absolute; inset-block-start: -40%; inset-inline-end: -30%; inline-size: 70%; aspect-ratio: 1; border-radius: 50%; background: rgba(255, 255, 255, 0.07); z-index: -1; pointer-events: none; }
.area-when__icon { display: inline-grid; place-items: center; inline-size: 3rem; block-size: 3rem; border-radius: 16px; background: rgba(255, 255, 255, 0.16); color: #fff; }
.area-when h2 { margin: 0; color: #fff; font-size: var(--ds-fs-xl); line-height: var(--ds-lh-tight); }
.area-when__text { color: rgba(255, 255, 255, 0.92); line-height: 1.9; }
.area-when__text p { margin: 0 0 var(--ds-space-2); }
.area-when__text p:last-child { margin-block-end: 0; }

.ar-sec { margin-block: 0 var(--ds-space-12); }
.ar-sec .ds-sechead__title { flex: 1 1 auto; min-inline-size: min(100%, 14rem); }
#area-specialists { scroll-margin-block-start: calc(var(--ds-header-h) + var(--ds-space-4)); }
.ar-empty { margin: 0; padding: var(--ds-space-6); border: 1px dashed var(--ds-control-line); border-radius: 20px; background: var(--ds-surface); color: var(--ds-text-2); text-align: center; }
.area-faq { margin-block: 0 var(--ds-space-12); }
@media (min-width: 640px) { .ar-related { grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); } }
.area-faq .pub-faq__item > summary { font-weight: var(--ds-fw-semibold); }
.area-faq .pub-faq__item > div { line-height: 1.9; }
.ar-cta { position: relative; overflow: hidden; isolation: isolate; display: grid; gap: var(--ds-space-5); align-items: center; margin-block: 0 var(--ds-space-12); padding: var(--ds-space-8); border-radius: 24px; background: var(--ds-grad-brand); color: #fff; --ds-focus: var(--ds-focus-on-dark); }
@media (min-width: 768px) { .ar-cta { grid-template-columns: minmax(0, 1fr) auto; padding: var(--ds-space-10); } }
.ar-cta::before { content: ""; position: absolute; inset-block-end: -50%; inset-inline-start: -10%; inline-size: 40%; aspect-ratio: 1; border-radius: 50%; background: rgba(255, 255, 255, 0.07); z-index: -1; }
.ar-cta h2 { margin: 0 0 var(--ds-space-2); color: #fff; font-size: clamp(1.4rem, 1.1rem + 1vw, 1.9rem); }
.ar-cta p { margin: 0; color: rgba(255, 255, 255, 0.9); max-inline-size: 36rem; }
.ar-cta .ar-cta__btn { gap: var(--ds-space-2); background: #fff; color: var(--ds-deep); border-color: #fff; justify-self: start; }
.ar-cta .ar-cta__btn:hover { background: var(--ds-mint); color: var(--ds-deep); }
@media (max-width: 639.98px) {
	.ar-hero { padding-block-end: var(--ds-space-8); }
	.area-signs, .area-when { padding: var(--ds-space-5); border-radius: 18px; }
	.area-sign { padding: var(--ds-space-3); }
	.ar-cta { padding: var(--ds-space-6); border-radius: 20px; }
}
@media (prefers-reduced-motion: no-preference) {
	.ar-hero__badge { transition: transform 300ms var(--ds-ease); }
	.ar-hero__visual:hover .ar-hero__badge { transform: rotate(0deg) scale(1.03); }
}
@media (forced-colors: active) {
	.area-signs, .area-sign, .area-when, .ar-cta, .ar-hero__badge { border: 1px solid CanvasText; }
	.area-when, .ar-cta { background: Canvas; color: CanvasText; }
}
/* counselling hub /counseling/ (owner, 2026-10-21; page-templates/template-counseling.php): the area hero (.ar-hero) with the area icons
   around the number of areas, one card per area in its own colour family, the .ar-cta banner */
.cs-hero__visual .cs-hero__center { position: relative; z-index: 1; display: grid; place-items: center; inline-size: 8.5rem; block-size: 8.5rem; border-radius: 50%; background: var(--ds-surface); box-shadow: var(--ds-shadow-card); color: var(--ds-f-ink); }
.cs-hero__center strong { font-size: 3rem; font-weight: 900; line-height: 1; }
.cs-orb { position: absolute; z-index: 2; display: grid; place-items: center; inline-size: 3.75rem; block-size: 3.75rem; border-radius: 20px; background: var(--ds-f-bg); color: var(--ds-f-ink); box-shadow: 0 10px 24px -14px rgba(23, 43, 42, 0.45); border: 3px solid var(--ds-surface); }
.cs-orb--0 { inset-block-start: 0; inset-inline-start: calc(50% - 1.875rem); transform: rotate(-6deg); }
.cs-orb--1 { inset-block-start: 20%; inset-inline-end: 2%; transform: rotate(5deg); }
.cs-orb--2 { inset-block-end: 20%; inset-inline-end: 2%; transform: rotate(-4deg); }
.cs-orb--3 { inset-block-end: 0; inset-inline-start: calc(50% - 1.875rem); transform: rotate(6deg); }
.cs-orb--4 { inset-block-end: 20%; inset-inline-start: 2%; transform: rotate(-5deg); }
.cs-orb--5 { inset-block-start: 20%; inset-inline-start: 2%; transform: rotate(4deg); }

.cs-grid { list-style: none; margin: 0 0 var(--ds-space-12); padding: 0; display: grid; gap: var(--ds-space-4); }
@media (min-width: 640px) { .cs-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .cs-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--ds-space-5); } }
.cs-grid > li { display: flex; }
.cs-card { position: relative; overflow: hidden; isolation: isolate; flex: 1 1 auto; display: flex; flex-direction: column; gap: var(--ds-space-3); padding: var(--ds-space-6); background: var(--ds-surface); border: 1px solid var(--ds-line); border-radius: 22px; color: var(--ds-text); text-decoration: none; transition: transform var(--ds-dur) var(--ds-ease), box-shadow var(--ds-dur) var(--ds-ease), border-color var(--ds-dur) var(--ds-ease); }
.cs-card::before { content: ""; position: absolute; z-index: -1; inset-block-start: -3.5rem; inset-inline-end: -3.5rem; inline-size: 9rem; block-size: 9rem; border-radius: 50%; background: var(--ds-f-bg); opacity: 0.55; }
.cs-card:hover, .cs-card:focus-visible { transform: translateY(-3px); border-color: var(--ds-f-ink); box-shadow: var(--ds-shadow-card); color: var(--ds-text); text-decoration: none; }
.cs-card__top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--ds-space-3); }
.cs-card__icon { display: grid; place-items: center; inline-size: 3.5rem; block-size: 3.5rem; border-radius: 18px; background: var(--ds-f-bg); color: var(--ds-f-ink); flex: none; }
.cs-card__count { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.3rem var(--ds-space-3); border: 1px solid var(--ds-line); border-radius: var(--ds-radius-pill); background: var(--ds-surface); color: var(--ds-text-2); font-size: var(--ds-fs-xs); font-weight: var(--ds-fw-semibold); white-space: nowrap; }
.cs-card__count .ds-icon { color: var(--ds-f-ink); }
.cs-card__title { font-size: var(--ds-fs-xl); font-weight: 800; line-height: var(--ds-lh-tight); }
.cs-card__desc { color: var(--ds-text-2); font-size: var(--ds-fs-sm); line-height: 1.8; }
.cs-card__go { margin-block-start: auto; align-self: flex-end; display: grid; place-items: center; inline-size: 2.5rem; block-size: 2.5rem; border-radius: 50%; background: var(--ds-f-bg); color: var(--ds-f-ink); transition: background var(--ds-dur) var(--ds-ease), color var(--ds-dur) var(--ds-ease); }
.cs-card:hover .cs-card__go, .cs-card:focus-visible .cs-card__go { background: var(--ds-f-ink); color: #fff; }
@media (max-width: 639.98px) {
	/* phones: shorter cards (two lines of description, no arrow button: the whole card is the link) */
	.cs-card { padding: var(--ds-space-5); border-radius: 20px; gap: var(--ds-space-2); }
	.cs-card__desc { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
	.cs-card__go { display: none; }
	.cs-card__icon { inline-size: 3rem; block-size: 3rem; border-radius: 16px; }
}
@media (prefers-reduced-motion: reduce) { .cs-card:hover, .cs-card:focus-visible { transform: none; } }
@media (forced-colors: active) { .cs-card { border: 1px solid CanvasText; } .cs-card::before { display: none; } }
/* specialists directory /specialists/ (owner, 2026-10-21; page-templates/template-directory.php): the .ar-hero with the two guided
   ways in on the side, a scrollable row of area chips that drive the form's area radios, pill filters, two-column cards on wide screens */
.dir-page .ar-hero { padding-block-end: var(--ds-space-8); }
.dir-guide { display: grid; gap: var(--ds-space-3); align-self: center; padding: var(--ds-space-5); border-radius: 22px; background: var(--ds-surface); border: 1px solid var(--ds-line); box-shadow: var(--ds-shadow-card); }
.dir-guide__title { margin: 0; font-weight: 800; font-size: var(--ds-fs-md); }
.dir-guide .dir-entries { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--ds-space-2); inline-size: 100%; }
.dir-guide .dir-entry { inline-size: 100%; min-block-size: 4.25rem; border-radius: 18px; background: var(--ds-bg); border-color: transparent; }
.dir-guide .dir-entry:hover, .dir-guide .dir-entry:focus-visible { background: var(--ds-surface); border-color: var(--ds-f-ink); }
.dir-guide .dir-entry__text { flex: 1 1 auto; }
.dir-guide .dir-entry__sub { display: block; }
.dir-entry__arrow { flex: none; color: var(--ds-f-ink); }
@media (max-width: 899.98px) {
	.dir-guide { padding: var(--ds-space-4); box-shadow: none; }
	.dir-guide .dir-entries { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.dir-guide .dir-entries--single { grid-template-columns: minmax(0, 1fr); }
	.dir-guide .dir-entry__sub, .dir-guide .dir-entry__arrow { display: none; }
}

.client-directory { padding-block-start: 0; }
/* the chip row scrolls inside its own box: grid items must be allowed to be narrower than their content */
.client-directory .directory-main, .client-directory .directory-layout > * { min-inline-size: 0; }
.client-directory .filters-searchbar { position: relative; }
.client-directory .filters-searchbar input { min-block-size: 3.25rem; border-radius: var(--ds-radius-pill); padding-inline: var(--ds-space-5); box-shadow: 0 8px 22px -16px rgba(23, 43, 42, 0.35); }
.client-directory .filters-searchbar .ds-btn { min-block-size: 3.25rem; border-radius: var(--ds-radius-pill); padding-inline: var(--ds-space-5); }

.dir-areas { display: flex; gap: var(--ds-space-2); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; padding-block: var(--ds-space-1) var(--ds-space-3); margin-block-end: var(--ds-space-2); scrollbar-width: none; }
.dir-areas::-webkit-scrollbar { display: none; }
.dir-area { flex: none; scroll-snap-align: start; display: inline-flex; align-items: center; gap: var(--ds-space-2); min-block-size: 2.75rem; padding-block: 0.25rem; padding-inline: 0.3rem var(--ds-space-4); border: 1px solid var(--ds-line); border-radius: var(--ds-radius-pill); background: var(--ds-surface); color: var(--ds-text); font: inherit; font-size: var(--ds-fs-sm); font-weight: var(--ds-fw-semibold); white-space: nowrap; cursor: pointer; transition: background var(--ds-dur) var(--ds-ease), border-color var(--ds-dur) var(--ds-ease), color var(--ds-dur) var(--ds-ease); }
.dir-area__icon { display: inline-grid; place-items: center; inline-size: 2rem; block-size: 2rem; border-radius: 50%; background: var(--ds-f-bg); color: var(--ds-f-ink); }
.dir-area:hover { border-color: var(--ds-f-ink); }
.dir-area[aria-pressed="true"] { background: var(--ds-f-ink); border-color: var(--ds-f-ink); color: #fff; }
.dir-area[aria-pressed="true"] .dir-area__icon { background: rgba(255, 255, 255, 0.2); color: #fff; }
.dir-area:focus-visible { outline: var(--ds-focus-width) solid var(--ds-focus); outline-offset: 2px; }
/* the chips are the area choice; the radios stay in the form (hidden) so the search, the applied count and «clear all» keep working */
.client-directory .filters-sidebar__group--area { display: none; }

.client-directory .filters-sidebar { border: 0; border-radius: 22px; box-shadow: var(--ds-shadow-card); padding: var(--ds-space-5); }
@media (min-width: 1024px) {
	.client-directory .filters-sidebar { position: sticky; inset-block-start: calc(var(--ds-header-h) + var(--ds-space-4)); max-block-size: calc(100vh - var(--ds-header-h) - var(--ds-space-8)); overflow-y: auto; }
}
.client-directory .filters-sidebar__group { border-block-start-color: var(--ds-line); }
.client-directory .filters-sidebar__group-title { font-weight: 800; color: var(--ds-text); }
.client-directory .filters-sidebar__options { flex-direction: row; flex-wrap: wrap; gap: var(--ds-space-2); }
.client-directory .filters-check { position: relative; display: inline-flex; align-items: center; min-block-size: 2.5rem; padding-inline: var(--ds-space-4); border: 1px solid var(--ds-control-line); border-radius: var(--ds-radius-pill); background: var(--ds-surface); font-size: var(--ds-fs-sm); }
.client-directory .filters-check input { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; margin: 0; opacity: 0; cursor: pointer; }
.client-directory .filters-check:hover { border-color: var(--ds-deep); }
.client-directory .filters-sidebar .pill { min-block-size: 2.5rem; padding-inline: var(--ds-space-4); font-size: var(--ds-fs-sm); border-radius: var(--ds-radius-pill); }
.client-directory .filters-sidebar .pill:has(input:checked),
.client-directory .filters-check:has(input:checked) { background: var(--ds-mint-strong); border-color: var(--ds-action); color: var(--ds-deep); font-weight: var(--ds-fw-semibold); box-shadow: inset 0 0 0 1px var(--ds-action); }
.client-directory .filters-check:has(input:focus-visible) { outline: var(--ds-focus-width) solid var(--ds-focus); outline-offset: 2px; }

@media (min-width: 1200px) {
	.client-directory #mentayar-directory-results.specialist-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; }
	.client-directory #mentayar-directory-results > .client-more,
	.client-directory #mentayar-directory-results > .client-state-wide,
	.client-directory #mentayar-directory-results > .directory-empty,
	.client-directory #mentayar-directory-results > p { grid-column: 1 / -1; }
	.client-directory #mentayar-directory-results .specialist-card.client-card .specialist-card__foot { grid-template-columns: minmax(0, 1fr); align-items: stretch; }
	.client-directory #mentayar-directory-results .specialist-card__actions { inline-size: 100%; }
}
.client-directory .specialist-card.client-card { border-color: transparent; border-radius: 22px; box-shadow: var(--ds-shadow-card); }
.client-directory .specialist-card.client-card:hover { transform: translateY(-3px); }
.client-directory .specialist-card__body { display: flex; flex-direction: column; flex: 1 1 auto; }
.client-directory .specialist-card__foot { margin-block-start: auto; }
@media (forced-colors: active) {
	.dir-area[aria-pressed="true"] { outline: 2px solid Highlight; }
	.client-directory .filters-check:has(input:checked) { outline: 2px solid Highlight; }
}
/* articles /articles/ + categories (template-parts/article/archive.php) and tests /tests/ (template-tests-catalog.php), owner
   redesign 2026-10-21: the same .ar-hero, chip row (.dir-area, here as links), cards and closing banner as the counseling pages */
.art-search { position: relative; inline-size: 100%; max-inline-size: 34rem; margin-block-start: var(--ds-space-1); }
.art-search input { inline-size: 100%; min-block-size: 3.25rem; padding-inline: 3rem var(--ds-space-5); border: 1px solid var(--ds-control-line); border-radius: var(--ds-radius-pill); background: var(--ds-surface); font: inherit; box-shadow: 0 8px 22px -16px rgba(23, 43, 42, 0.35); }
.art-search__icon { position: absolute; inset-block-start: 50%; inset-inline-start: 1rem; transform: translateY(-50%); color: var(--ds-text-2); pointer-events: none; }
.art-cats { margin-block-end: var(--ds-space-6); }
a.dir-area { text-decoration: none; }
a.dir-area:hover { color: var(--ds-text); text-decoration: none; }
.dir-area[aria-current="page"] { background: var(--ds-f-ink); border-color: var(--ds-f-ink); color: #fff; }
.dir-area[aria-current="page"]:hover { color: #fff; }
.dir-area[aria-current="page"] .dir-area__icon { background: rgba(255, 255, 255, 0.2); color: #fff; }
.art-cats .dir-area:not(:has(.dir-area__icon)) { padding-inline: var(--ds-space-4); }

.art-grid { display: grid; gap: var(--ds-space-5); margin-block-end: var(--ds-space-10); }
@media (min-width: 640px) { .art-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .art-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.art-grid .article-card { display: flex; flex-direction: column; border: 0; border-radius: 22px; box-shadow: var(--ds-shadow-card); overflow: hidden; }
.art-grid .article-card:hover { transform: translateY(-3px); }
.art-grid .article-card__thumb { border-radius: 0; }
/* no picture yet: a soft violet-to-mint panel instead of an empty grey box */
.art-grid .article-card__thumb .specialist-card__photo--placeholder { inline-size: 100%; block-size: 100%; background: radial-gradient(60% 80% at 80% 20%, rgba(255, 255, 255, 0.7), transparent 70%), linear-gradient(135deg, var(--ds-f-violet-bg) 0%, var(--ds-mint) 100%); }
.art-grid .article-card__body { padding: var(--ds-space-5); gap: var(--ds-space-2); }
.art-grid .article-card__category { align-self: flex-start; padding: 0.2rem var(--ds-space-3); border-radius: var(--ds-radius-pill); background: var(--ds-f-violet-bg); color: var(--ds-f-violet-ink); font-weight: var(--ds-fw-semibold); }
.art-grid .article-card__title { font-size: var(--ds-fs-lg); font-weight: 800; line-height: 1.5; }
.art-grid .article-card__excerpt { line-height: 1.8; }
.art-grid .article-card__meta { margin-block-start: auto; padding-block-start: var(--ds-space-3); border-block-start: 1px solid var(--ds-line); }
/* the newest piece, wide, on the first page of the archive */
@media (min-width: 1024px) {
	.art-grid--featured > .article-card:first-child { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
	.art-grid--featured > .article-card:first-child .article-card__thumb { aspect-ratio: auto; min-block-size: 18rem; block-size: 100%; }
	.art-grid--featured > .article-card:first-child .article-card__body { padding: var(--ds-space-8); justify-content: center; }
	.art-grid--featured > .article-card:first-child .article-card__title { font-size: clamp(1.4rem, 1.1rem + 1vw, 1.9rem); }
}
.art-empty { display: grid; justify-items: center; gap: var(--ds-space-3); max-inline-size: 36rem; margin: 0 auto var(--ds-space-12); padding: var(--ds-space-10) var(--ds-space-6); border-radius: 24px; background: var(--ds-surface); border: 1px dashed var(--ds-control-line); text-align: center; }
.art-empty h2 { margin: 0; font-size: var(--ds-fs-xl); }
.art-empty p { margin: 0; color: var(--ds-text-2); line-height: 1.8; }
.art-empty__actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--ds-space-3) var(--ds-space-5); margin-block-start: var(--ds-space-2); }

.tst-steps { list-style: none; margin: var(--ds-space-1) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--ds-space-2); }
.tst-steps li { display: inline-flex; align-items: center; gap: var(--ds-space-2); min-block-size: 2.5rem; padding-inline: 0.3rem var(--ds-space-4); border: 1px solid var(--ds-line); border-radius: var(--ds-radius-pill); background: var(--ds-surface); font-size: var(--ds-fs-sm); font-weight: var(--ds-fw-semibold); }
.tst-steps__num { display: inline-grid; place-items: center; inline-size: 1.9rem; block-size: 1.9rem; border-radius: 50%; background: var(--ds-f-bg); color: var(--ds-f-ink); font-weight: 800; }
.tst-grid .cs-card__title { font-size: var(--ds-fs-lg); }
.tst-card__foot { margin-block-start: auto; display: flex; align-items: center; justify-content: space-between; gap: var(--ds-space-3); padding-block-start: var(--ds-space-3); border-block-start: 1px solid var(--ds-line); }
.tst-card__meta { color: var(--ds-text-2); font-size: var(--ds-fs-xs); font-weight: var(--ds-fw-semibold); }
.tst-card__start { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.35rem var(--ds-space-3); border-radius: var(--ds-radius-pill); background: var(--ds-f-bg); color: var(--ds-f-ink); font-size: var(--ds-fs-sm); font-weight: var(--ds-fw-bold); transition: background var(--ds-dur) var(--ds-ease), color var(--ds-dur) var(--ds-ease); }
.cs-card:hover .tst-card__start, .cs-card:focus-visible .tst-card__start { background: var(--ds-f-ink); color: #fff; }
.tst-grid { margin-block-end: 0; }
@media (max-width: 639.98px) {
	.tst-grid .cs-card__desc { -webkit-line-clamp: 3; }
	.art-grid--featured > .article-card:first-child { grid-column: auto; }
}
/* about page (page-about.php) and the join page hero (template-specialist-application.php), owner redesign 2026-10-21 */
.cs-card--static:hover { transform: none; border-color: var(--ds-line); box-shadow: none; }
.ab-values { margin-block-end: 0; }
@media (min-width: 1100px) { .ab-values { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.ab-values .cs-card__desc { font-size: var(--ds-fs-sm); }
.ab-card__link { margin-block-start: auto; display: inline-flex; align-items: center; gap: var(--ds-space-1); }
.ab-hero__logo img { inline-size: 70%; block-size: auto; }
.ab-sec-lead { margin: calc(var(--ds-space-3) * -1) 0 var(--ds-space-5); color: var(--ds-text-2); }
.ar-cta__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ds-space-3) var(--ds-space-5); }
.ar-cta .ar-cta__link { color: #fff; font-weight: var(--ds-fw-semibold); text-decoration: underline; text-underline-offset: 0.3em; text-decoration-color: rgba(255, 255, 255, 0.5); }
.ar-cta .ar-cta__link:hover { color: #fff; text-decoration-color: #fff; }
.cs-hero__center .ds-icon { color: var(--ds-f-ink); }

.jn-hero2 .jn-facts { margin-block-start: var(--ds-space-1); }
.jn-hero2 .jn-fact { border-radius: var(--ds-radius-pill); }
.jn-hero2 .jn-hero__have { margin: 0; color: var(--ds-text-2); font-size: var(--ds-fs-sm); max-inline-size: 22rem; }
.jn .jn-sec__title { font-size: clamp(1.35rem, 1.1rem + 1vw, 1.9rem); font-weight: 800; }
body .jn .jn-sec--tint { background: var(--ds-surface); }   /* also beats the warm body.is-ravanline tint */
.jn .jn-card { border: 0; border-radius: 22px; background: var(--ds-bg); transition: transform var(--ds-dur) var(--ds-ease), box-shadow var(--ds-dur) var(--ds-ease); }
.jn .jn-card:hover { transform: translateY(-3px); box-shadow: var(--ds-shadow-card); background: var(--ds-surface); }
.jn .jn-card h3 { font-weight: 800; }
.jn .jn-money__row { border-radius: 22px; }
.jn .jn-formcard { border: 0; border-radius: 26px; }
.jn .jn-faq__item { border-radius: 18px; border-color: transparent; background: var(--ds-bg); }
@media (prefers-reduced-motion: reduce) { .jn .jn-card:hover { transform: none; } .tq .tq-opt::before { transition: none; } }
/* single article (single-mentayar_article.php), owner redesign 2026-10-21: .ar-hero head, reading column + sticky side box */
.art-single__head { max-inline-size: 48rem; }
.art-single__title { font-size: clamp(1.8rem, 1.3rem + 2.2vw, 2.8rem); }
a.ar-hero__eyebrow { text-decoration: none; }
a.ar-hero__eyebrow:hover { text-decoration: none; filter: brightness(0.97); }
.art-meta { list-style: none; margin: var(--ds-space-1) 0 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--ds-space-2) var(--ds-space-4); color: var(--ds-text-2); font-size: var(--ds-fs-sm); }
.art-meta li { display: inline-flex; align-items: center; gap: 0.4rem; }
.art-meta .ds-icon { color: var(--ds-f-ink); }
.art-meta__author { color: var(--ds-text); font-weight: var(--ds-fw-semibold); }
.art-meta__avatar { display: inline-grid; place-items: center; inline-size: 2rem; block-size: 2rem; border-radius: 50%; background: var(--ds-f-bg); color: var(--ds-f-ink); font-weight: 800; }
.art-single__thumb, .art-single__media { margin-block: 0 var(--ds-space-8); border-radius: 26px; overflow: hidden; box-shadow: var(--ds-shadow-card); }
.art-single__thumb img { display: block; inline-size: 100%; block-size: auto; max-block-size: 30rem; object-fit: cover; }
.art-single__media video { display: block; inline-size: 100%; background: #000; }
.art-single__media--audio { display: flex; align-items: center; gap: var(--ds-space-4); padding: var(--ds-space-5); background: var(--ds-surface); }
.art-single__media--audio audio { flex: 1 1 auto; min-inline-size: 0; }
.art-single__layout { display: grid; gap: var(--ds-space-8); margin-block-end: var(--ds-space-12); }
@media (min-width: 1024px) {
	.art-single__layout { grid-template-columns: minmax(0, 1fr) 18rem; align-items: start; gap: var(--ds-space-12); }
	.art-side { position: sticky; inset-block-start: calc(var(--ds-header-h) + var(--ds-space-4)); }
}
.art-body { max-inline-size: 44rem; font-size: 1.0625rem; line-height: 2.05; color: var(--ds-text); }
.art-body > * { margin-block: 0 1.1em; }
.art-body h2 { margin-block: 1.8em 0.6em; font-size: clamp(1.3rem, 1.1rem + 0.8vw, 1.6rem); font-weight: 800; line-height: 1.5; padding-inline-start: var(--ds-space-3); border-inline-start: 4px solid var(--ds-f-violet-ink); }
.art-body h3 { margin-block: 1.5em 0.5em; font-size: var(--ds-fs-lg); font-weight: 800; }
.art-body ul, .art-body ol { padding-inline-start: 1.4em; }
.art-body li { margin-block-end: 0.4em; }
.art-body li::marker { color: var(--ds-action); font-weight: 700; }
.art-body blockquote { margin-inline: 0; padding: var(--ds-space-4) var(--ds-space-5); border-radius: 18px; background: var(--ds-f-violet-bg); color: var(--ds-text); border: 0; }
.art-body blockquote p:last-child { margin-block-end: 0; }
.art-body a { color: var(--ds-action); text-underline-offset: 0.25em; }
.art-body img { border-radius: 18px; }
.art-side { display: grid; gap: var(--ds-space-4); }
.art-side__box { display: grid; gap: var(--ds-space-3); padding: var(--ds-space-5); border-radius: 22px; background: var(--ds-surface); border: 1px solid var(--ds-line); }
.art-side__box--cta { background: var(--ds-mint); border-color: var(--ds-mint-strong); }
.art-side__title { margin: 0; font-weight: 800; }
.art-side__text { margin: 0; color: var(--ds-text-2); font-size: var(--ds-fs-sm); line-height: 1.8; }
.art-share { display: flex; flex-wrap: wrap; gap: var(--ds-space-2); }
.art-share__btn { display: inline-flex; align-items: center; gap: 0.4rem; min-block-size: 2.5rem; padding-inline: var(--ds-space-3); border: 1px solid var(--ds-line); border-radius: var(--ds-radius-pill); background: var(--ds-bg); color: var(--ds-text); font: inherit; font-size: var(--ds-fs-sm); font-weight: var(--ds-fw-semibold); text-decoration: none; cursor: pointer; }
.art-share__btn:hover { border-color: var(--ds-action); color: var(--ds-deep); text-decoration: none; }
.art-share__btn .ds-icon { color: var(--ds-action); }
.art-share__btn.is-done { background: var(--ds-mint-strong); border-color: var(--ds-action); }
.art-related .art-grid { margin-block-end: 0; }
/* client panel sections (owner, 2026-10-21; assets/js/client-dashboard.js wraps each section's <h1> + description in .cl-head and
   gives the sub-navigation chips an icon; VIEW_LOOK there holds the icon and colour family of every section) */
#mentayar-client-dashboard .cl-head { display: flex; align-items: center; gap: var(--ds-space-4); margin-block-end: var(--ds-space-5); padding: var(--ds-space-5) var(--ds-space-6); border-radius: 24px; background: radial-gradient(70% 140% at 100% 0%, var(--ds-f-bg), transparent 70%), var(--ds-surface); border: 1px solid var(--ds-line); }
[dir="ltr"] #mentayar-client-dashboard .cl-head { background: radial-gradient(70% 140% at 0% 0%, var(--ds-f-bg), transparent 70%), var(--ds-surface); }
#mentayar-client-dashboard .cl-head__icon { flex: none; display: grid; place-items: center; inline-size: 3.25rem; block-size: 3.25rem; border-radius: 18px; background: var(--ds-f-bg); color: var(--ds-f-ink); }
#mentayar-client-dashboard .cl-head__text { display: grid; gap: var(--ds-space-1); min-inline-size: 0; }
#mentayar-client-dashboard .cl-head h1 { margin: 0; font-size: clamp(1.35rem, 1.15rem + 0.8vw, 1.75rem); font-weight: 800; line-height: 1.35; }
#mentayar-client-dashboard .cl-head h1::before { content: none; }
#mentayar-client-dashboard .cl-head .fin-header__desc { margin: 0; max-inline-size: 40rem; color: var(--ds-text-2); line-height: 1.8; }
@media (max-width: 639.98px) {
	#mentayar-client-dashboard .cl-head { padding: var(--ds-space-4); gap: var(--ds-space-3); border-radius: 20px; }
	#mentayar-client-dashboard .cl-head__icon { inline-size: 2.75rem; block-size: 2.75rem; border-radius: 14px; }
}
#mentayar-client-dashboard .dashboard-content > section > h2 { margin: var(--ds-space-6) 0 var(--ds-space-3); font-size: var(--ds-fs-lg); font-weight: 800; }

.client-subnav a { display: inline-flex; align-items: center; gap: var(--ds-space-2); padding-inline: 0.3rem var(--ds-space-4); }
.client-subnav__icon { display: inline-grid; place-items: center; inline-size: 2rem; block-size: 2rem; border-radius: 50%; background: var(--ds-f-bg); color: var(--ds-f-ink); flex: none; }
.client-subnav a[aria-current="page"] { background: var(--ds-f-ink); border-color: var(--ds-f-ink); color: #fff; }
.client-subnav a[aria-current="page"] .client-subnav__icon { background: rgba(255, 255, 255, 0.2); color: #fff; }
.client-subnav a:hover { border-color: var(--ds-f-ink); }

#mentayar-client-dashboard .dashboard-card { border-radius: 20px; }
/* «nothing here yet» cards: centred, dashed, calm */
#mentayar-client-dashboard .dashboard-card:has(> .fin-card__hint:only-child),
#mentayar-client-dashboard .ds-state--empty { padding: var(--ds-space-8) var(--ds-space-5); border: 1px dashed var(--ds-control-line); border-radius: 22px; background: var(--ds-surface); text-align: center; color: var(--ds-text-2); line-height: 1.9; }
#mentayar-client-dashboard .dashboard-card > .fin-card__hint:only-child { margin: 0 auto; max-inline-size: 34rem; }
#mentayar-client-dashboard .ds-state--empty .ds-state__title { color: var(--ds-text); font-weight: 800; }
/* messages before the first conversation: no empty list column and divider, one centred note */
#mentayar-client-dashboard .messages-layout:has(> [data-messages-empty]:not([hidden])) { display: block; min-block-size: 0; }
#mentayar-client-dashboard .messages-layout:has(> [data-messages-empty]:not([hidden])) > .messages-layout__list { display: none; }
#mentayar-client-dashboard .messages-layout__empty { padding: var(--ds-space-8) var(--ds-space-5); border: 1px dashed var(--ds-control-line); border-radius: 22px; background: var(--ds-surface); line-height: 1.9; }

/* built-in questionnaires in their colour family (same pairs as the public /tests/ page) */
#mentayar-client-dashboard .test-grid .test-card--builtin { border-radius: 22px; position: relative; overflow: hidden; isolation: isolate; }
#mentayar-client-dashboard .test-grid .test-card--builtin::before { content: ""; position: absolute; z-index: -1; inset-block-start: -3.5rem; inset-inline-end: -3.5rem; inline-size: 9rem; block-size: 9rem; border-radius: 50%; background: var(--ds-f-bg); opacity: 0.55; }
#mentayar-client-dashboard .test-grid .test-card--builtin .test-card--catalog__icon { background: var(--ds-f-bg); color: var(--ds-f-ink); border-radius: 20px; }
#mentayar-client-dashboard .test-grid .test-card--builtin:hover { border-color: var(--ds-f-ink); }
/* client wallet (owner, 2026-10-21: "fix the fields at the bottom of the wallet"): balance as a highlighted card, top-up and withdrawal
   side by side on wide screens, amount and account fields at a readable width, the two payout methods next to each other, the
   «nothing to withdraw» note at the top of its box, history lists in boxes. Layout only: amounts and limits still come from the server. */
#mentayar-client-dashboard [data-wallet-root] { display: grid; gap: var(--ds-space-4); }
@media (min-width: 1100px) {
	#mentayar-client-dashboard [data-wallet-root] { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
	#mentayar-client-dashboard [data-wallet-root] > .client-wallet,
	#mentayar-client-dashboard [data-wallet-root] > section:not(.ds-card) { grid-column: 1 / -1; }
}
#mentayar-client-dashboard [data-wallet-root] > * { margin: 0; }
#mentayar-client-dashboard [data-wallet-root] > .ds-card { border-radius: 22px; padding: var(--ds-space-6); }
#mentayar-client-dashboard .client-wallet { position: relative; overflow: hidden; isolation: isolate; background: var(--ds-grad-brand); color: #fff; border: 0; --ds-focus: var(--ds-focus-on-dark); }
#mentayar-client-dashboard .client-wallet::after { content: ""; position: absolute; z-index: -1; inset-block-start: -45%; inset-inline-start: -10%; inline-size: 45%; aspect-ratio: 1; border-radius: 50%; background: rgba(255, 255, 255, 0.07); }
#mentayar-client-dashboard .client-wallet .client-h2 { color: rgba(255, 255, 255, 0.9); font-size: var(--ds-fs-md); font-weight: var(--ds-fw-semibold); }
#mentayar-client-dashboard .client-wallet .client-wallet__balance { margin: var(--ds-space-1) 0 var(--ds-space-4); color: #fff; font-size: clamp(2rem, 1.6rem + 1.6vw, 2.8rem); font-weight: 900; line-height: 1.2; }
#mentayar-client-dashboard .client-wallet .client-facts--row { display: flex; flex-wrap: wrap; gap: var(--ds-space-2); margin: 0 0 var(--ds-space-4); }
#mentayar-client-dashboard .client-wallet .client-facts--row > div { display: grid; gap: 0.1rem; padding: var(--ds-space-2) var(--ds-space-4); border-radius: 16px; background: rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.18); }
#mentayar-client-dashboard .client-wallet dt { color: rgba(255, 255, 255, 0.85); font-size: var(--ds-fs-xs); }
#mentayar-client-dashboard .client-wallet dd { margin: 0; color: #fff; font-weight: 800; }
#mentayar-client-dashboard .client-wallet .client-muted { color: rgba(255, 255, 255, 0.88); margin: 0; }

#mentayar-client-dashboard [data-wallet-root] .ds-field { max-inline-size: 26rem; }
#mentayar-client-dashboard [data-wallet-root] input[type="number"] { font-size: var(--ds-fs-lg); font-weight: 700; direction: ltr; text-align: start; }
#mentayar-client-dashboard [data-wallet-root] input { border-radius: 14px; min-block-size: 3rem; }
#mentayar-client-dashboard [data-wallet-root] .client-btn-row .ds-btn,
#mentayar-client-dashboard [data-withdrawal-form] > button[type="submit"] { min-inline-size: 12rem; border-radius: var(--ds-radius-pill); }
#mentayar-client-dashboard [data-wallet-root] .client-dlg-block { margin-block-start: var(--ds-space-4); padding-block-start: var(--ds-space-4); border-block-start: 1px dashed var(--ds-line); }
#mentayar-client-dashboard [data-withdrawal-form] { display: flex; flex-direction: column; align-items: stretch; gap: var(--ds-space-3); }
#mentayar-client-dashboard [data-withdrawal-form] > button[type="submit"] { align-self: flex-start; }
#mentayar-client-dashboard [data-withdrawal-form] .ds-choice-group { margin: 0; padding: 0; border: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ds-space-2); max-inline-size: 26rem; }
#mentayar-client-dashboard [data-withdrawal-form] .ds-choice-group legend { grid-column: 1 / -1; margin-block-end: var(--ds-space-2); }
#mentayar-client-dashboard [data-withdrawal-form] .ds-choice { margin: 0; border-radius: 16px; }
#mentayar-client-dashboard [data-withdrawal-form] .client-dlg-block.ds-choice-group { border: 0; padding-block-start: 0; margin-block-start: 0; }
/* no withdrawable money yet: the note goes first, as a calm notice, and the fields below read as not available yet */
#mentayar-client-dashboard [data-withdrawal-form]:has(> button[type="submit"]:disabled) > p.client-muted:last-child { order: -1; margin: 0; padding: var(--ds-space-3) var(--ds-space-4); border-radius: 14px; background: var(--ds-info-bg); border: 1px solid var(--ds-info-line); color: var(--ds-text); }
#mentayar-client-dashboard [data-wallet-root] > section:not(.ds-card) { padding: var(--ds-space-5) var(--ds-space-6); border-radius: 22px; background: var(--ds-surface); border: 1px solid var(--ds-line); }
#mentayar-client-dashboard [data-wallet-root] > section:not(.ds-card) .client-h2 { margin-block-start: 0; }
#mentayar-client-dashboard [data-wallet-root] > section:not(.ds-card) > p.client-muted:last-child { margin-block-end: 0; }
@media (max-width: 639.98px) {
	#mentayar-client-dashboard [data-wallet-root] > .ds-card { padding: var(--ds-space-5); }
	#mentayar-client-dashboard [data-wallet-root] .client-btn-row .ds-btn,
	#mentayar-client-dashboard [data-withdrawal-form] > button[type="submit"] { inline-size: 100%; }
}
/* questionnaire dialog, one question per screen (owner, 2026-10-21; startTest() in assets/js/client-dashboard.js) */
.tq { display: grid; gap: var(--ds-space-4); }
.tq-about { margin: 0; padding: var(--ds-space-2) var(--ds-space-4); border-radius: 14px; background: var(--ds-info-bg); color: var(--ds-text); font-size: var(--ds-fs-sm); line-height: 1.8; }
.tq-progress { display: flex; align-items: center; gap: var(--ds-space-3); }
.tq-progress__bar { flex: 1 1 auto; block-size: 0.5rem; border-radius: var(--ds-radius-pill); background: var(--ds-mint-strong); overflow: hidden; }
.tq-progress__bar > span { display: block; block-size: 100%; inline-size: 0; border-radius: inherit; background: var(--ds-action); transition: inline-size 250ms var(--ds-ease); }
.tq-progress__text { flex: none; color: var(--ds-text-2); font-size: var(--ds-fs-sm); font-weight: var(--ds-fw-semibold); }
.tq .tq-q { margin: 0; padding: var(--ds-space-5); border: 1px solid var(--ds-line); border-radius: 22px; background: var(--ds-surface); }
.tq .tq-q legend { float: inline-start; inline-size: 100%; display: flex; align-items: flex-start; gap: var(--ds-space-3); margin: 0 0 var(--ds-space-4); font-size: clamp(1.1rem, 1rem + 0.5vw, 1.35rem); font-weight: 800; line-height: 1.7; }
.tq .tq-q legend + * { clear: both; }
.tq-q__num { flex: none; display: inline-grid; place-items: center; inline-size: 2.25rem; block-size: 2.25rem; border-radius: 12px; background: var(--ds-mint-strong); color: var(--ds-deep); font-size: var(--ds-fs-md); }
/* the answers of one question: a graphic scale on one row (owner, 2026-10-21: "one row", then "make it graphic"). One circle per
   answer on a line; each step is a little bigger and a deeper teal ("more" further along, true for the agreement, frequency and amount
   scales the questionnaires use), the chosen circle fills with a tick. The real radio covers the whole answer (invisible), so mouse,
   touch, keyboard arrows and screen readers work exactly as before. */
.tq-opts { --tq-c: 3.3rem; position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: var(--ds-space-1); padding-block-start: var(--ds-space-2); }
.tq-opts::before { content: ""; position: absolute; inset-inline: calc(100% / 10); inset-block-start: calc(var(--ds-space-2) + var(--tq-c) / 2); block-size: 4px; margin-block-start: -2px; border-radius: 2px; background: linear-gradient(to left, #CDEFE7, #007A6A); }
[dir="ltr"] .tq-opts::before { background: linear-gradient(to right, #CDEFE7, #007A6A); }
.tq .tq-opt { --tq-d: 2.05rem; --tq-bg: #CDEFE7; position: relative; margin: 0; min-block-size: 0; padding: 0 0.15rem var(--ds-space-1); display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: var(--ds-space-2); border: 0; background: transparent; box-shadow: none; text-align: center; cursor: pointer; }
.tq .tq-opt[data-level="2"] { --tq-d: 2.25rem; --tq-bg: #A6E2D4; }
.tq .tq-opt[data-level="3"] { --tq-d: 2.45rem; --tq-bg: #6FCDB9; }
.tq .tq-opt[data-level="4"] { --tq-d: 2.65rem; --tq-bg: #2FAE97; }
.tq .tq-opt[data-level="5"] { --tq-d: 2.9rem; --tq-bg: #0E8C77; }
/* the icon in each circle: a face (owner, 2026-10-21), drawn as a mask in the circle's ink (dark on the light circles, white on the dark
   ones). Which face goes where is decided per question in startTest() (data-face 1 = very sad ... 5 = big smile). */
.tq .tq-opt { --tq-ink: #0A4539; }
.tq .tq-opt[data-level="3"], .tq .tq-opt[data-level="4"], .tq .tq-opt[data-level="5"] { --tq-ink: #FFFFFF; }
[data-face="1"] { --tq-face: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='8.5' cy='9.5' r='1.7' fill='black'/%3E%3Ccircle cx='15.5' cy='9.5' r='1.7' fill='black'/%3E%3Cpath d='M7 17.8 Q12 12.2 17 17.8' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'/%3E%3Cpath d='M6.5 6.8 L10 7.8 M17.5 6.8 L14 7.8' stroke='black' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E"); }
[data-face="2"] { --tq-face: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='8.5' cy='9.5' r='1.7' fill='black'/%3E%3Ccircle cx='15.5' cy='9.5' r='1.7' fill='black'/%3E%3Cpath d='M8 16.8 Q12 14 16 16.8' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E"); }
[data-face="3"] { --tq-face: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='8.5' cy='9.5' r='1.7' fill='black'/%3E%3Ccircle cx='15.5' cy='9.5' r='1.7' fill='black'/%3E%3Cpath d='M8 15.5 H16' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E"); }
[data-face="4"] { --tq-face: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='8.5' cy='9.5' r='1.7' fill='black'/%3E%3Ccircle cx='15.5' cy='9.5' r='1.7' fill='black'/%3E%3Cpath d='M8 14.3 Q12 17.6 16 14.3' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E"); }
[data-face="5"] { --tq-face: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='8.5' cy='9.5' r='1.7' fill='black'/%3E%3Ccircle cx='15.5' cy='9.5' r='1.7' fill='black'/%3E%3Cpath d='M7 13.4 Q12 20.5 17 13.4 Z' fill='black' stroke='black' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.tq .tq-opt::before { content: ""; position: relative; z-index: 1; flex: none; inline-size: var(--tq-d); block-size: var(--tq-d); margin-block: calc((var(--tq-c) - var(--tq-d)) / 2); border-radius: 50%; background: var(--tq-bg); box-shadow: 0 0 0 4px var(--ds-surface), 0 6px 14px -8px rgba(0, 80, 70, 0.55); transition: transform var(--ds-dur) var(--ds-ease), background var(--ds-dur) var(--ds-ease), box-shadow var(--ds-dur) var(--ds-ease); }
.tq .tq-opt::after { content: ""; position: absolute; z-index: 1; inset-block-start: calc((var(--tq-c) - var(--tq-d)) / 2 + var(--tq-d) * 0.15); inset-inline-start: calc(50% - var(--tq-d) * 0.35); inline-size: calc(var(--tq-d) * 0.7); block-size: calc(var(--tq-d) * 0.7); background: var(--tq-ink); -webkit-mask: var(--tq-face) center / contain no-repeat; mask: var(--tq-face) center / contain no-repeat; pointer-events: none; transition: opacity var(--ds-dur) var(--ds-ease); }
.tq .tq-opt:has(input:checked)::after { opacity: 0; }
.tq .tq-opt input { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; margin: 0; opacity: 0; cursor: pointer; z-index: 2; }
.tq .tq-opt .ds-choice__title { font-size: var(--ds-fs-sm); font-weight: var(--ds-fw-semibold); line-height: 1.6; color: var(--ds-text-2); overflow-wrap: normal; word-break: normal; hyphens: none; }
.tq .tq-opt:hover::before { transform: scale(1.12); }
.tq .tq-opt:has(input:checked)::before { background: var(--ds-action) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 58% no-repeat; transform: scale(1.18); box-shadow: 0 0 0 4px var(--ds-surface), 0 0 0 7px var(--ds-mint-strong), 0 10px 20px -8px rgba(0, 80, 70, 0.6); }
.tq .tq-opt:has(input:checked) { background: transparent; border: 0; box-shadow: none; }
.tq .tq-opt:has(input:checked) .ds-choice__title { color: var(--ds-deep); font-weight: 800; }
.tq .tq-opt:has(input:focus-visible)::before { outline: var(--ds-focus-width) solid var(--ds-focus); outline-offset: 6px; }
.tq-nav { display: flex; align-items: center; justify-content: space-between; gap: var(--ds-space-3); padding-block-start: var(--ds-space-1); }
.tq-nav__prev, .tq-nav__next { display: inline-flex; align-items: center; justify-content: center; gap: var(--ds-space-2); min-block-size: 3.25rem; border-radius: var(--ds-radius-pill); font: inherit; font-weight: 800; cursor: pointer; transition: background var(--ds-dur) var(--ds-ease), transform var(--ds-dur) var(--ds-ease), box-shadow var(--ds-dur) var(--ds-ease); }
.tq-nav__prev { padding-inline: var(--ds-space-3) var(--ds-space-5); border: 0; background: var(--ds-mint); color: var(--ds-deep); }
.tq-nav__prev:hover { background: var(--ds-mint-strong); }
.tq-nav__next { margin-inline-start: auto; min-inline-size: 11rem; padding-inline: var(--ds-space-6) var(--ds-space-4); border: 0; background: var(--ds-grad-brand); color: #fff; box-shadow: 0 12px 24px -14px rgba(0, 91, 80, 0.7); }
.tq-nav__next:hover { transform: translateY(-1px); box-shadow: 0 16px 28px -14px rgba(0, 91, 80, 0.8); }
.tq-nav__next .ds-icon { flex: none; display: inline-grid; place-items: center; inline-size: 2.25rem; block-size: 2.25rem; padding: 0.45rem; border-radius: 50%; background: rgba(255, 255, 255, 0.18); box-sizing: border-box; }
/* arrows point the way the reader moves: «next» toward the end of the line, «previous» back toward its start */
.tq-nav__next:not(.tq-nav__submit) .ds-icon { transform: scaleX(-1); }
[dir="ltr"] .tq-nav__next:not(.tq-nav__submit) .ds-icon { transform: none; }
[dir="ltr"] .tq-nav__prev .ds-icon { transform: scaleX(-1); }
.tq-nav__prev:focus-visible, .tq-nav__next:focus-visible, .tq-review:focus-visible { outline: var(--ds-focus-width) solid var(--ds-focus); outline-offset: 3px; }
.tq-review { flex: none; display: inline-flex; align-items: center; gap: 0.35rem; min-block-size: 2.25rem; padding-inline: var(--ds-space-3); border: 1px solid var(--ds-line); border-radius: var(--ds-radius-pill); background: var(--ds-surface); color: var(--ds-text-2); font: inherit; font-size: var(--ds-fs-xs); font-weight: var(--ds-fw-semibold); cursor: pointer; }
.tq-review:hover { border-color: var(--ds-action); color: var(--ds-deep); }
.tq-review[aria-pressed="true"] { background: var(--ds-mint-strong); border-color: var(--ds-action); color: var(--ds-deep); }
.tq-review .ds-icon { color: var(--ds-action); }
.tq--all .tq-q + .tq-q { margin-block-start: var(--ds-space-3); }
.tq .client-q--missing { border-color: var(--ds-danger); border-inline-start-width: 4px; }
@media (forced-colors: active) { .tq .tq-opt::before { border: 2px solid CanvasText; } .tq .tq-opt:has(input:checked)::before { background: Highlight; } .tq-opts::before { background: CanvasText; } }
@media (max-width: 639.98px) {
	.tq .tq-q { padding: var(--ds-space-4) var(--ds-space-3); }
	.tq-opts { --tq-c: 2.75rem; gap: 0.15rem; }
	.tq .tq-opt { --tq-d: 1.75rem; }
	.tq .tq-opt[data-level="2"] { --tq-d: 1.9rem; }
	.tq .tq-opt[data-level="3"] { --tq-d: 2.05rem; }
	.tq .tq-opt[data-level="4"] { --tq-d: 2.2rem; }
	.tq .tq-opt[data-level="5"] { --tq-d: 2.4rem; }
	.tq .tq-opt .ds-choice__title { font-size: 0.8125rem; line-height: 1.5; }
	.tq-nav__next { flex: 1 1 auto; min-inline-size: 0; }
	.tq-nav__prev span { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
	.tq-nav__prev { inline-size: 3.25rem; padding: 0; flex: none; }
	.tq-review span { display: none; }
	.tq-review { inline-size: 2.25rem; padding: 0; justify-content: center; }
}

/* «my progress» (owner, 2026-10-21): the note on top, the four-week report as a card with stat tiles, the questionnaire results
   in their colour, goals and the closing note calm */
#mentayar-client-dashboard [data-progress-root] { display: grid; gap: var(--ds-space-4); }
#mentayar-client-dashboard [data-progress-root] > * { margin: 0; }
#mentayar-client-dashboard [data-progress-root] > p.client-muted:first-child { padding: var(--ds-space-3) var(--ds-space-4); border-radius: 14px; background: var(--ds-info-bg); border: 1px solid var(--ds-info-line); color: var(--ds-text); font-size: var(--ds-fs-sm); }
#mentayar-client-dashboard [data-progress-root] > .ds-card { border-radius: 22px; padding: var(--ds-space-6); }
#mentayar-client-dashboard .client-report__sentence { border-radius: 16px; line-height: 1.9; }
#mentayar-client-dashboard .client-report__chart { border-radius: 18px; background: var(--ds-bg); border: 0; padding: var(--ds-space-4); }
#mentayar-client-dashboard [data-progress-root] .client-facts--row { gap: var(--ds-space-3); }
#mentayar-client-dashboard [data-progress-root] .client-facts--row > div { padding: var(--ds-space-3) var(--ds-space-4); border-radius: 18px; background: var(--ds-surface); border: 1px solid var(--ds-line); }
#mentayar-client-dashboard [data-progress-root] .client-report .client-facts--row > div { background: var(--ds-bg); border: 0; }
#mentayar-client-dashboard [data-progress-root] .client-facts--row dd { font-size: var(--ds-fs-2xl); font-weight: 900; color: var(--ds-deep); line-height: 1.3; }
#mentayar-client-dashboard .client-report__opt { padding: var(--ds-space-4); border: 0; border-radius: 18px; background: var(--ds-mint); }
#mentayar-client-dashboard [data-progress-root] > .ds-card:not(.client-report):has(> .client-muted:last-child) { border-style: dashed; }
#mentayar-client-dashboard [data-progress-root] > .client-h2,
#mentayar-client-dashboard [data-progress-root] > .client-box__head { margin-block-start: var(--ds-space-3); }
#mentayar-client-dashboard [data-progress-root] .client-grid > .ds-card { position: relative; overflow: hidden; isolation: isolate; border-radius: 20px; padding-inline-start: var(--ds-space-5); }
#mentayar-client-dashboard [data-progress-root] .client-grid > .ds-card::before { content: ""; position: absolute; inset-block: 0; inset-inline-start: 0; inline-size: 5px; background: var(--ds-f-ink, var(--ds-action)); }
#mentayar-client-dashboard [data-progress-root] .client-grid > .ds-card:nth-child(3n+1) { --ds-f-ink: var(--ds-f-blue-ink); }
#mentayar-client-dashboard [data-progress-root] .client-grid > .ds-card:nth-child(3n+2) { --ds-f-ink: var(--ds-f-teal-ink); }
#mentayar-client-dashboard [data-progress-root] .client-grid > .ds-card:nth-child(3n) { --ds-f-ink: var(--ds-f-orange-ink); }
#mentayar-client-dashboard [data-progress-root] > .client-box__head + p.client-muted { padding: var(--ds-space-5); border: 1px dashed var(--ds-control-line); border-radius: 20px; background: var(--ds-surface); text-align: center; line-height: 1.9; }
#mentayar-client-dashboard [data-progress-root] > p.client-muted:last-child { font-size: var(--ds-fs-xs); text-align: center; }
/* questionnaire result cards (owner, 2026-10-21; resultCardHtml() in assets/js/client-dashboard.js): score large, a gauge between the
   lowest and highest possible score, the level as a chip, one neutral colour (a high score is good on some scales and not on others) */
.tr { display: grid; gap: var(--ds-space-3); }
.tr--grid { grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
.tr-card { display: grid; gap: var(--ds-space-2); padding: var(--ds-space-5); border-radius: 22px; background: var(--ds-surface); border: 1px solid var(--ds-line); position: relative; overflow: hidden; isolation: isolate; }
.tr-card--primary { background: radial-gradient(70% 120% at 100% 0%, var(--ds-f-bg), transparent 70%), var(--ds-surface); }
[dir="ltr"] .tr-card--primary { background: radial-gradient(70% 120% at 0% 0%, var(--ds-f-bg), transparent 70%), var(--ds-surface); }
.tr-card__head { display: flex; align-items: center; flex-wrap: wrap; gap: var(--ds-space-2) var(--ds-space-3); }
.tr-card__icon { flex: none; display: grid; place-items: center; inline-size: 2.5rem; block-size: 2.5rem; border-radius: 14px; background: var(--ds-f-bg); color: var(--ds-f-ink); }
.tr-card__label { font-weight: 800; }
.tr-card__band { margin-inline-start: auto; padding: 0.2rem var(--ds-space-3); border-radius: var(--ds-radius-pill); background: var(--ds-f-bg); color: var(--ds-f-ink); font-size: var(--ds-fs-sm); font-weight: 800; }
.tr-card__score { margin: var(--ds-space-1) 0 0; display: flex; align-items: baseline; gap: var(--ds-space-2); }
.tr-card__score strong { font-size: clamp(2rem, 1.7rem + 1.4vw, 2.75rem); font-weight: 900; line-height: 1.1; color: var(--ds-text); }
.tr-card__score span { color: var(--ds-text-2); font-weight: var(--ds-fw-semibold); }
.tr--grid .tr-card__score strong { font-size: 1.75rem; }
.tr-gauge { position: relative; block-size: 0.75rem; border-radius: var(--ds-radius-pill); background: var(--ds-tint); }
.tr-gauge__fill { position: absolute; inset-block: 0; inset-inline-start: 0; border-radius: inherit; background: linear-gradient(to left, var(--ds-f-ink), var(--ds-f-bg)); }
[dir="ltr"] .tr-gauge__fill { background: linear-gradient(to right, var(--ds-f-bg), var(--ds-f-ink)); }
.tr-gauge__dot { position: absolute; inset-block-start: 50%; inline-size: 1.25rem; block-size: 1.25rem; margin-block-start: -0.625rem; margin-inline-start: -0.625rem; border-radius: 50%; background: var(--ds-surface); border: 4px solid var(--ds-f-ink); box-shadow: 0 4px 10px -4px rgba(0, 0, 0, 0.35); }
.tr-gauge__ends { display: flex; justify-content: space-between; color: var(--ds-text-2); font-size: var(--ds-fs-xs); }
.tr-card__text { margin: var(--ds-space-1) 0 0; color: var(--ds-text); line-height: 1.9; font-size: var(--ds-fs-sm); }
.tr-attr { margin: 0; color: var(--ds-text-2); font-size: var(--ds-fs-xs); }
@media (forced-colors: active) { .tr-gauge { border: 1px solid CanvasText; } .tr-gauge__fill { background: Highlight; } }
/* result screen «at a glance» + «next step» (owner, 2026-10-21, after esanj.org's result page) */
.tr-levels { --tr-c: 3.6rem; position: relative; list-style: none; margin: var(--ds-space-2) 0 0; padding: 0; display: grid; grid-template-columns: repeat(var(--tr-n), minmax(0, 1fr)); gap: var(--ds-space-1); }
.tr-levels::before { content: ""; position: absolute; inset-inline: calc(50% / var(--tr-n)); inset-block-start: calc(var(--tr-c) / 2); block-size: 3px; margin-block-start: -1.5px; background: var(--ds-line); border-radius: 2px; }
.tr-level { position: relative; display: flex; flex-direction: column; align-items: center; gap: var(--ds-space-2); text-align: center; }
.tr-level__mark { position: relative; z-index: 1; display: block; inline-size: 2.6rem; block-size: 2.6rem; margin-block: calc((var(--tr-c) - 2.6rem) / 2); border-radius: 50%; background: var(--ds-tint); box-shadow: 0 0 0 4px var(--ds-surface); transition: transform var(--ds-dur) var(--ds-ease); }
.tr-level__mark[data-face]::after { content: ""; position: absolute; inset: 15%; background: var(--ds-text-2); -webkit-mask: var(--tq-face) center / contain no-repeat; mask: var(--tq-face) center / contain no-repeat; }
.tr-level__mark[data-step]::after { content: ""; position: absolute; inset: 32%; border-radius: 50%; background: var(--ds-text-2); opacity: 0.45; }
.tr-level__label { color: var(--ds-text-2); font-size: var(--ds-fs-xs); line-height: 1.6; font-weight: var(--ds-fw-semibold); }
.tr-level.is-on .tr-level__mark { inline-size: var(--tr-c); block-size: var(--tr-c); margin-block: 0; background: var(--ds-f-ink); box-shadow: 0 0 0 4px var(--ds-surface), 0 0 0 7px var(--ds-f-bg), 0 12px 24px -10px rgba(0, 0, 0, 0.35); }
.tr-level.is-on .tr-level__mark::after { background: #fff; opacity: 1; }
.tr-level.is-on .tr-level__label { color: var(--ds-f-ink); font-weight: 800; font-size: var(--ds-fs-sm); }
.tr-card__scorebox { display: grid; gap: var(--ds-space-2); margin-block-start: var(--ds-space-3); padding: var(--ds-space-4); border-radius: 18px; background: var(--ds-bg); }
.tr-card__score { align-items: baseline; flex-wrap: wrap; }
.tr-card__score-label { flex-basis: 100%; color: var(--ds-text-2); font-size: var(--ds-fs-xs); font-weight: var(--ds-fw-semibold); }
.tr-next { display: grid; gap: var(--ds-space-3); padding: var(--ds-space-5); border-radius: 22px; background: var(--ds-mint); border: 1px solid var(--ds-mint-strong); }
.tr-next__title { margin: 0; font-size: var(--ds-fs-lg); font-weight: 800; }
.tr-next__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--ds-space-2); }
.tr-next__list li { display: flex; align-items: flex-start; gap: var(--ds-space-2); line-height: 1.8; font-size: var(--ds-fs-sm); }
.tr-next__list .ds-icon { flex: none; margin-block-start: 0.25em; color: var(--ds-action); }
.tr-next__cta { justify-self: start; border-radius: var(--ds-radius-pill); min-inline-size: 12rem; }
@media (max-width: 639.98px) {
	.tr-levels { --tr-c: 3rem; }
	.tr-level__mark { inline-size: 2.1rem; block-size: 2.1rem; margin-block: calc((var(--tr-c) - 2.1rem) / 2); }
	.tr-level__label { font-size: 0.75rem; }
	.tr-level.is-on .tr-level__label { font-size: 0.8125rem; }
	.tr-next__cta { justify-self: stretch; }
}
/* «my progress»: every questionnaire result (latest of each), opening the full result screen */
.pg-tests { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--ds-space-2); }
.pg-test { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ds-space-2) var(--ds-space-4); padding: var(--ds-space-3) var(--ds-space-4); border-radius: 18px; background: var(--ds-surface); border: 1px solid var(--ds-line); }
.pg-test__icon { flex: none; display: grid; place-items: center; inline-size: 2.75rem; block-size: 2.75rem; border-radius: 14px; background: var(--ds-f-bg); color: var(--ds-f-ink); }
.pg-test__main { flex: 1 1 12rem; display: grid; min-inline-size: 0; }
.pg-test__name { font-weight: 800; }
.pg-test__date { color: var(--ds-text-2); font-size: var(--ds-fs-xs); }
.pg-test__score { display: inline-flex; align-items: baseline; gap: 0.35rem; }
.pg-test__score strong { font-size: var(--ds-fs-xl); font-weight: 900; }
.pg-test__score span { color: var(--ds-text-2); font-size: var(--ds-fs-xs); }
.pg-test__level { padding: 0.2rem var(--ds-space-3); border-radius: var(--ds-radius-pill); background: var(--ds-f-bg); color: var(--ds-f-ink); font-size: var(--ds-fs-xs); font-weight: 800; }
.pg-test__open { border-radius: var(--ds-radius-pill); }
.pg-tests-empty { display: grid; justify-items: center; gap: var(--ds-space-3); padding: var(--ds-space-6); border: 1px dashed var(--ds-control-line); border-radius: 20px; background: var(--ds-surface); text-align: center; color: var(--ds-text-2); }
.pg-tests-empty p { margin: 0; }
@media (max-width: 639.98px) { .pg-test__open { flex: 1 1 100%; } }
/* «my progress» trends: full-width cards like the result rows (owner, 2026-10-21) */
.pg-trends { display: grid; gap: var(--ds-space-3); }
.pg-trend-once { display: flex; align-items: flex-start; gap: var(--ds-space-2); margin: var(--ds-space-3) 0 0; padding: var(--ds-space-3) var(--ds-space-4); border-radius: 14px; background: var(--ds-info-bg); border: 1px solid var(--ds-info-line); font-size: var(--ds-fs-sm); line-height: 1.8; }
.pg-trend-once .ds-icon { flex: none; margin-block-start: 0.25em; color: var(--ds-info); }
.pg-trend { display: grid; gap: var(--ds-space-3); padding: var(--ds-space-4) var(--ds-space-5); border-radius: 18px; background: var(--ds-surface); border: 1px solid var(--ds-line); }
.pg-trend__head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ds-space-2) var(--ds-space-4); }
.pg-trend__name { flex: 1 1 10rem; margin: 0; font-size: var(--ds-fs-md); font-weight: 800; }
.pg-trend__nums { margin: 0; display: inline-flex; align-items: center; gap: var(--ds-space-2); }
.pg-trend__num { display: grid; justify-items: center; padding: 0.3rem var(--ds-space-3); border-radius: 14px; background: var(--ds-bg); line-height: 1.3; }
.pg-trend__num span { color: var(--ds-text-2); font-size: var(--ds-fs-xs); }
.pg-trend__num strong { font-size: var(--ds-fs-lg); font-weight: 900; }
.pg-trend__num--last { background: var(--ds-f-bg); color: var(--ds-f-ink); }
.pg-trend__num--last span { color: var(--ds-f-ink); }
.pg-trend__arrow { color: var(--ds-text-2); display: inline-flex; }
.pg-trend__arrow .ds-icon { transform: scaleX(-1); }
[dir="ltr"] .pg-trend__arrow .ds-icon { transform: none; }
.pg-trend__chart { padding: var(--ds-space-2); border-radius: 14px; background: linear-gradient(var(--ds-bg), var(--ds-surface)); }
.pg-trend__chart .client-chart { block-size: 150px; }
.pg-trend__dates { display: flex; justify-content: space-between; margin-block-start: calc(var(--ds-space-2) * -1); color: var(--ds-text-2); font-size: var(--ds-fs-xs); }
.pg-trend .client-chart-table { margin: 0; }
.pg-trend .client-chart-table summary { font-size: var(--ds-fs-sm); font-weight: var(--ds-fw-semibold); }
.pg-trend .ds-table-wrap { margin-block-start: var(--ds-space-2); border-radius: 14px; border: 1px solid var(--ds-line); overflow: hidden; }
.pg-trend .ds-table { inline-size: 100%; border-collapse: collapse; font-size: var(--ds-fs-sm); }
.pg-trend .ds-table th { background: var(--ds-bg); color: var(--ds-text-2); font-weight: var(--ds-fw-semibold); text-align: start; padding: var(--ds-space-2) var(--ds-space-4); }
.pg-trend .ds-table td { padding: var(--ds-space-2) var(--ds-space-4); border-block-start: 1px solid var(--ds-line); }
.pg-trend .ds-table tbody tr:nth-child(even) td { background: var(--ds-bg); }
.pg-trend .ds-table .is-num { text-align: end; font-weight: 800; font-variant-numeric: tabular-nums; }
@media (max-width: 639.98px) { .pg-trend__chart .client-chart { block-size: 110px; } }
/* interactive trend chart (owner, 2026-10-21: "like Google Analytics"; trendChartHtml()/wireTrendCharts() in client-dashboard.js) */
.ga-chart { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "axis plot" ". dates"; gap: var(--ds-space-1) var(--ds-space-2); }
.ga-chart__axis { grid-area: axis; display: flex; flex-direction: column; justify-content: space-between; padding-block: 0.25rem; color: var(--ds-text-2); font-size: var(--ds-fs-xs); text-align: end; font-variant-numeric: tabular-nums; }
.ga-chart__plot { grid-area: plot; position: relative; block-size: 200px; border-radius: 14px; background: linear-gradient(var(--ds-bg), var(--ds-surface)); touch-action: pan-y; cursor: crosshair; }
.ga-chart__svg { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; }
.ga-chart__grid { stroke: var(--ds-line); stroke-width: 1; stroke-dasharray: 4 6; vector-effect: non-scaling-stroke; }
.ga-chart__area { fill: var(--ds-f-ink); fill-opacity: 0.1; }
.ga-chart__line { fill: none; stroke: var(--ds-f-ink); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.ga-chart__guide { position: absolute; inset-block: 0; inline-size: 0; border-inline-start: 1.5px dashed var(--ds-f-ink); opacity: 0.55; pointer-events: none; }
.ga-chart__pt { position: absolute; z-index: 2; inline-size: 14px; block-size: 14px; margin: -7px 0 0 -7px; padding: 0; border-radius: 50%; border: 3px solid var(--ds-f-ink); background: var(--ds-surface); cursor: pointer; transition: transform var(--ds-dur) var(--ds-ease); }
.ga-chart__pt::before { content: ""; position: absolute; inset: -14px; }   /* a 42px touch target */
.ga-chart__pt.is-last { background: var(--ds-f-ink); }
.ga-chart__pt.is-on, .ga-chart__pt:hover { transform: scale(1.35); box-shadow: 0 0 0 6px var(--ds-f-bg); }
.ga-chart__pt:focus-visible { outline: var(--ds-focus-width) solid var(--ds-focus); outline-offset: 4px; }
.ga-chart__tip { position: absolute; z-index: 3; transform: translate(-50%, calc(-100% - 16px)); display: grid; gap: 0.15rem; min-inline-size: 9rem; padding: var(--ds-space-2) var(--ds-space-3); border-radius: 14px; background: var(--ds-ink); color: #fff; box-shadow: 0 14px 30px -12px rgba(0, 0, 0, 0.5); pointer-events: none; text-align: center; direction: rtl; white-space: nowrap; }
html[lang^="en"] .ga-chart__tip { direction: ltr; }
.ga-chart__tip::after { content: ""; position: absolute; inset-block-start: 100%; left: 50%; margin-left: -7px; border: 7px solid transparent; border-top-color: var(--ds-ink); }
.ga-chart__tip.is-left { transform: translate(calc(-100% + 22px), calc(-100% - 16px)); }
.ga-chart__tip.is-left::after { left: auto; right: 15px; }
.ga-chart__tip.is-right { transform: translate(-22px, calc(-100% - 16px)); }
.ga-chart__tip.is-right::after { left: 15px; margin-left: 0; }
.ga-chart__tdate { color: rgba(255, 255, 255, 0.75); font-size: var(--ds-fs-xs); }
.ga-chart__tval strong { font-size: var(--ds-fs-xl); font-weight: 900; }
.ga-chart__of { color: rgba(255, 255, 255, 0.75); font-size: var(--ds-fs-xs); margin-inline-start: 0.25rem; }
.ga-chart__delta { display: inline-flex; align-items: center; justify-content: center; gap: 0.3rem; margin-block-start: 0.15rem; padding: 0.15rem 0.5rem; border-radius: var(--ds-radius-pill); background: rgba(255, 255, 255, 0.12); font-size: var(--ds-fs-xs); color: #fff; }
.ga-chart__delta .ds-icon { display: inline-block; flex: none; }
.ga-chart__delta .ds-icon { transform: rotate(-90deg); }
.ga-chart__delta.is-down .ds-icon { transform: rotate(90deg); }
.ga-chart__delta span { color: rgba(255, 255, 255, 0.7); }
.ga-chart__dates { grid-area: dates; display: flex; justify-content: space-between; color: var(--ds-text-2); font-size: var(--ds-fs-xs); }
.ga-chart__dates span, .ga-chart__axis span { unicode-bidi: plaintext; }   /* Persian dates read right inside the left-to-right time axis */
@media (max-width: 639.98px) { .ga-chart__plot { block-size: 160px; } }
@media (prefers-reduced-motion: reduce) { .ga-chart__pt { transition: none; } }
@media (forced-colors: active) { .ga-chart__line { stroke: CanvasText; } .ga-chart__pt { border-color: CanvasText; } .ga-chart__tip { border: 1px solid CanvasText; } }
/* trends: one big chart + a picker row of small cards (owner, 2026-10-21; renderTrends()/sparklineHtml() in client-dashboard.js) */
.pg-trendbox { display: grid; gap: var(--ds-space-3); }
.pg-pick { display: flex; gap: var(--ds-space-2); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; padding-block: var(--ds-space-1); scrollbar-width: thin; }
.pg-pick__item { flex: 0 0 11.5rem; scroll-snap-align: start; display: grid; gap: var(--ds-space-1); padding: var(--ds-space-3); border-radius: 18px; border: 1px solid var(--ds-line); background: var(--ds-surface); color: var(--ds-text); font: inherit; text-align: start; cursor: pointer; transition: border-color var(--ds-dur) var(--ds-ease), box-shadow var(--ds-dur) var(--ds-ease), transform var(--ds-dur) var(--ds-ease); }
.pg-pick__item:hover { border-color: var(--ds-f-ink); transform: translateY(-2px); }
.pg-pick__item[aria-selected="true"] { border-color: var(--ds-f-ink); box-shadow: inset 0 0 0 1px var(--ds-f-ink), 0 10px 22px -16px rgba(0, 0, 0, 0.45); background: radial-gradient(90% 120% at 100% 0%, var(--ds-f-bg), transparent 70%), var(--ds-surface); }
.pg-pick__item:focus-visible { outline: var(--ds-focus-width) solid var(--ds-focus); outline-offset: 2px; }
.pg-pick__top { display: flex; align-items: center; gap: var(--ds-space-2); min-inline-size: 0; }
.pg-pick__icon { flex: none; display: grid; place-items: center; inline-size: 1.75rem; block-size: 1.75rem; border-radius: 10px; background: var(--ds-f-bg); color: var(--ds-f-ink); }
.pg-pick__name { font-size: var(--ds-fs-xs); font-weight: 800; line-height: 1.5; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.pg-pick__spark { display: block; inline-size: 100%; block-size: 28px; direction: ltr; }
.pg-pick__sparkline { fill: none; stroke: var(--ds-f-ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.pg-pick__sparea { fill: var(--ds-f-ink); fill-opacity: 0.1; }
.pg-pick__val { display: flex; align-items: center; justify-content: space-between; gap: var(--ds-space-2); }
.pg-pick__val strong { font-size: var(--ds-fs-lg); font-weight: 900; }
.pg-pick__delta { display: inline-flex; align-items: center; gap: 0.15rem; padding: 0.1rem 0.4rem; border-radius: var(--ds-radius-pill); background: var(--ds-bg); color: var(--ds-text-2); font-size: var(--ds-fs-xs); font-weight: 700; }
.pg-pick__delta .ds-icon { transform: rotate(-90deg); }
.pg-pick__delta.is-down .ds-icon { transform: rotate(90deg); }
/* ---- client Home (owner 2026-10-21: «نصفه شده»): one full-width flow (assets/js/client-dashboard.js loadOverview). The greeting
   on the brand gradient with ONE white card beside it (next session / book again / find a specialist), the four actions in one row,
   then the questionnaires, tests and areas; a side column only when it has something (messages, credits, subscription). ---- */
#mentayar-client-dashboard .ch-panel > .ds-pagehead { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ch { display: grid; gap: var(--ds-space-6); min-inline-size: 0; container-type: inline-size; container-name: ch; }
.ch > * { min-inline-size: 0; margin-block: 0; }
.ch-hero { position: relative; overflow: hidden; isolation: isolate; display: grid; gap: var(--ds-space-5); align-items: center; padding: var(--ds-space-6); border-radius: 28px; color: #fff; box-shadow: var(--ds-shadow-card); --ds-focus: var(--ds-focus-on-dark);
	background: radial-gradient(55% 90% at 100% 0%, rgba(255, 255, 255, 0.16), transparent 70%), radial-gradient(50% 90% at 0% 100%, rgba(0, 166, 147, 0.38), transparent 70%), var(--ds-grad-brand); }
.ch-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background-image: radial-gradient(rgba(255, 255, 255, 0.14) 1.2px, transparent 1.3px); background-size: 22px 22px; -webkit-mask-image: radial-gradient(60% 90% at 100% 0%, #000, transparent 70%); mask-image: radial-gradient(60% 90% at 100% 0%, #000, transparent 70%); }
@container ch (min-width: 760px) { .ch-hero { grid-template-columns: minmax(0, 1fr) minmax(19rem, 27rem); gap: var(--ds-space-8); padding: var(--ds-space-8); } }
.ch-hero__text { display: grid; gap: var(--ds-space-2); justify-items: start; }
.ch-hero__date { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.25rem 0.85rem; border-radius: 99px; background: rgba(255, 255, 255, 0.14); border: 1px solid rgba(255, 255, 255, 0.26); font-size: var(--ds-fs-sm); font-weight: 700; }
.ch-hero__hello { margin: 0; font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.4rem); font-weight: 800; line-height: 1.35; color: #fff; text-wrap: balance; overflow-wrap: anywhere; }
.ch-hero__lead { margin: 0; max-inline-size: 34rem; font-size: var(--ds-fs-md); line-height: 1.8; color: rgba(255, 255, 255, 0.9); }
.ch-card { display: grid; gap: var(--ds-space-3); padding: var(--ds-space-5); border-radius: 22px; background: var(--ds-surface); color: var(--ds-text); box-shadow: 0 24px 50px -24px rgba(0, 0, 0, 0.45); --ds-focus: #005B50; }
.ch-card__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--ds-space-2); }
.ch-card__pill { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.2rem 0.75rem; border-radius: 99px; background: var(--ds-mint-strong); color: var(--ds-deep); font-size: var(--ds-fs-sm); font-weight: 700; }
.ch-card__count { display: inline-flex; align-items: center; gap: 0.3rem; color: var(--ds-text-2); font-size: var(--ds-fs-sm); font-weight: 700; }
.ch-card__who { display: flex; align-items: center; gap: var(--ds-space-3); min-inline-size: 0; }
.ch-card__whotext { display: grid; gap: 0.1rem; min-inline-size: 0; }
.ch-card__name { font-size: var(--ds-fs-lg); font-weight: 800; line-height: 1.5; }
.ch-card__when { color: var(--ds-text-2); font-size: var(--ds-fs-sm); unicode-bidi: plaintext; }
.ch-card__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ds-space-2) var(--ds-space-4); margin-block-start: var(--ds-space-1); }
.ch-card__actions .ds-btn { gap: 0.4rem; }
.ch-card__note { margin: 0; font-size: var(--ds-fs-xs); color: var(--ds-text-2); line-height: 1.7; }
.ch-card--cta { justify-items: start; }
.ch-card__title { font-size: var(--ds-fs-xl); font-weight: 800; line-height: 1.4; }
.ch-card__sub { margin-block-start: -0.35rem; color: var(--ds-text-2); }
.ch-sec { display: grid; gap: var(--ds-space-4); }
.ch-h2 { margin: 0; font-size: var(--ds-fs-xl); font-weight: 800; line-height: 1.4; }
.ch-sechead { display: flex; align-items: center; justify-content: space-between; gap: var(--ds-space-3); }
.ch-sechead .pub-textlink { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0; background: none; border: 0; font: inherit; font-weight: 700; cursor: pointer; }
.ch-acts { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--ds-space-3); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@container ch (min-width: 700px) { .ch-acts { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--ds-space-4); } }
.ch-acts > li { display: flex; }
.ch-act { position: relative; display: flex; align-items: center; gap: var(--ds-space-3); inline-size: 100%; padding: var(--ds-space-4); border-radius: 22px; border: 1px solid var(--ds-line); background: radial-gradient(90% 130% at 100% 0%, var(--ds-f-bg), transparent 75%), var(--ds-surface); color: var(--ds-text); text-align: start; text-decoration: none; font: inherit; cursor: pointer; transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease; }
[dir="ltr"] .ch-act { background: radial-gradient(90% 130% at 0% 0%, var(--ds-f-bg), transparent 75%), var(--ds-surface); }
.ch-act:hover { transform: translateY(-2px); box-shadow: var(--ds-shadow-card); border-color: transparent; color: var(--ds-text); text-decoration: none; }
.ch-act__icon { position: relative; flex: none; display: grid; place-items: center; inline-size: 3.25rem; block-size: 3.25rem; border-radius: 16px; background: var(--ds-f-bg); color: var(--ds-f-ink); }
.ch-act__badge { position: absolute; inset-block-start: -6px; inset-inline-end: -6px; display: grid; place-items: center; min-inline-size: 1.35rem; block-size: 1.35rem; padding-inline: 0.3rem; border-radius: 99px; border: 2px solid var(--ds-surface); background: var(--ds-danger); color: #fff; font-size: 0.75rem; font-weight: 800; }
.ch-act__text { flex: 1 1 auto; min-inline-size: 0; display: grid; gap: 0.1rem; }
.ch-act__label { font-size: var(--ds-fs-md); font-weight: 800; line-height: 1.5; }
.ch-act__sub { font-size: var(--ds-fs-sm); color: var(--ds-text-2); line-height: 1.6; }
.ch-act__arrow { flex: none; color: var(--ds-f-ink); opacity: 0.7; }
@media (max-width: 599.98px) {
	.ch { gap: var(--ds-space-5); }
	.ch-hero { padding: var(--ds-space-5); border-radius: 24px; }
	.ch-card { padding: var(--ds-space-4); }
}
/* when Home itself is not wide the four cards are narrow: icon above the text, no arrow */
@container ch (max-width: 1099.98px) {
	.ch-act { flex-direction: column; align-items: flex-start; gap: var(--ds-space-2); padding: var(--ds-space-4); }
	.ch-act__arrow { display: none; }
}
@media (prefers-reduced-motion: reduce) { .ch-act { transition: none; } .ch-act:hover { transform: none; } }
.ch-todo .ds-rows { margin: 0; display: grid; gap: var(--ds-space-3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); }
.ch-body { display: grid; gap: var(--ds-space-6); }
@media (min-width: 1100px) { .ch-body--split { grid-template-columns: minmax(0, 1fr) minmax(18rem, 22rem); align-items: start; } }
.ch-main, .ch-side { display: grid; gap: var(--ds-space-6); min-inline-size: 0; align-content: start; }
.ch-side { gap: var(--ds-space-4); }
.ch-side > * { margin-block: 0; }
.ch-main > div:empty { display: none; }
@media (min-width: 640px) { .ch .ch-tests { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); } }
.ch-areas { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--ds-space-2); }
.ch-area { display: inline-flex; align-items: center; gap: 0.55rem; min-block-size: 3rem; padding-block: 0.35rem; padding-inline: 0.4rem 1.1rem; border-radius: 99px; border: 1px solid var(--ds-line); background: var(--ds-surface); color: var(--ds-text); font-weight: 700; text-decoration: none; transition: background-color 0.15s ease, border-color 0.15s ease; }
.ch-area:hover { background: var(--ds-f-bg); border-color: transparent; color: var(--ds-f-ink); text-decoration: none; }
.ch-area__icon { flex: none; display: grid; place-items: center; inline-size: 2.25rem; block-size: 2.25rem; border-radius: 50%; background: var(--ds-f-bg); color: var(--ds-f-ink); }
/* ---- END client Home ---- */
/* ---- END counseling area page ---- */
/* ---- BEGIN therapist time zone (feature tz, 2026-10-22): the zone card on Calendar > Weekly hours, its city list and confirmation ---- */
.sp-tz { margin-block: var(--ds-space-3); }
.sp-tz__card { display: grid; gap: var(--ds-space-3); padding: var(--ds-space-4); }
.sp-tz__head { display: flex; align-items: flex-start; gap: var(--ds-space-3); color: var(--ds-text); }
.sp-tz__head > svg { flex: none; margin-block-start: 0.2rem; color: var(--ds-action); }
.sp-tz__head p { margin: 0; }
.sp-tz__label { font-size: var(--ds-fs-sm); color: var(--ds-text-2); font-weight: var(--ds-fw-semibold); }
.sp-tz__zone { font-size: var(--ds-fs-lg); font-weight: var(--ds-fw-bold); line-height: var(--ds-lh-tight); }
.sp-tz__off { font-size: var(--ds-fs-sm); font-weight: var(--ds-fw-semibold); color: var(--ds-text-2); unicode-bidi: isolate; }
.sp-tz__card > p { margin: 0; }
.sp-tz__places { margin: 0; padding-inline-start: var(--ds-space-4); }
.sp-tz__card .ds-btn { justify-self: start; }
.sp-tz__msg:empty, .sp-tz__err:empty { display: none; }
.sp-tz__msg.is-error, .sp-tz__err { color: var(--ds-danger); }
.sp-tz__msg.is-ok { color: var(--ds-f-ink); }
.sp-tz__list { display: grid; gap: var(--ds-space-1); max-block-size: min(55vh, 26rem); overflow-y: auto; overscroll-behavior: contain; margin-block-start: var(--ds-space-3); }
.sp-tz__group { margin: var(--ds-space-3) 0 var(--ds-space-1); font-size: var(--ds-fs-xs); font-weight: var(--ds-fw-bold); color: var(--ds-text-2); }
.sp-tz__opt { display: flex; align-items: center; justify-content: space-between; gap: var(--ds-space-3); min-block-size: 3rem; padding-inline: var(--ds-space-3); border: 1px solid var(--ds-line); border-radius: var(--ds-radius-control); background: var(--ds-surface); color: var(--ds-text); font: inherit; text-align: start; cursor: pointer; }
.sp-tz__opt:hover { background: var(--ds-f-bg); border-color: transparent; }
.sp-tz__opt:focus-visible { outline: var(--ds-focus-width) solid var(--ds-focus); outline-offset: var(--ds-focus-offset); }
.sp-tz__opt.is-current { border-color: var(--ds-action); }
.sp-tz__opt-city { font-weight: var(--ds-fw-semibold); min-inline-size: 0; overflow-wrap: anywhere; }
.sp-tz__opt-off { flex: none; font-size: var(--ds-fs-sm); color: var(--ds-text-2); }
.sp-tz__confirm p { margin: 0; }
.sp-tz__more summary { cursor: pointer; font-weight: var(--ds-fw-semibold); margin-block-start: var(--ds-space-2); }
.sp-tz__more ul { margin: var(--ds-space-2) 0 0; padding-inline-start: var(--ds-space-4); display: grid; gap: var(--ds-space-1); }
.sp-tz__places-q { border: 0; margin: 0; padding: 0; display: grid; gap: var(--ds-space-2); }
.sp-tz__places-q legend { font-weight: var(--ds-fw-bold); margin-block-end: var(--ds-space-2); }
/* ---- END therapist time zone ---- */
/* ---- therapist notices + calendar sync (feature 4 + 5, assets/js/ds/specialist-notices.js) ---- */
.spn-contact { list-style: none; margin: 0 0 var(--ds-space-3); padding: 0; display: grid; gap: var(--ds-space-1); font-size: var(--ds-fs-sm); color: var(--ds-text-2); overflow-wrap: anywhere; }
.spn-contact__item.is-warn { color: var(--ds-text); background: var(--ds-warning-bg); border: 1px solid var(--ds-warning-line); border-radius: var(--ds-radius-sm); padding: var(--ds-space-2) var(--ds-space-3); }
.spn-rows { list-style: none; margin: 0; padding: 0; display: grid; }
.spn-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--ds-space-2) var(--ds-space-3); padding-block: var(--ds-space-3); border-block-end: 1px solid var(--ds-line); }
.spn-row:last-child { border-block-end: 0; }
.spn-row__name { flex: 1 1 10rem; min-inline-size: 0; font-weight: var(--ds-fw-semibold); display: grid; gap: 0.15rem; }
.spn-row__sub { font-weight: var(--ds-fw-regular); font-size: var(--ds-fs-xs); color: var(--ds-text-2); }
.spn-row__switches { display: flex; gap: var(--ds-space-2); }
.spn-switch { display: inline-flex; align-items: center; gap: 0.45rem; min-block-size: 2.5rem; min-inline-size: 6.25rem; padding-block: 0.3rem; padding-inline: 0.55rem 0.8rem; border-radius: var(--ds-radius-pill); border: 1px solid var(--ds-line); background: var(--ds-surface); color: var(--ds-text-2); font: inherit; font-size: var(--ds-fs-sm); font-weight: var(--ds-fw-semibold); cursor: pointer; }
.spn-switch.is-on { background: var(--ds-mint); border-color: var(--ds-mint-strong); color: var(--ds-deep); }
.spn-switch:disabled { opacity: 0.55; cursor: not-allowed; }
.spn-switch:focus-visible, .spc-stop:focus-visible, .spc-open:focus-visible { outline: var(--ds-focus-width) solid var(--ds-focus); outline-offset: var(--ds-focus-offset); }
.spn-switch--none { visibility: hidden; border: 0; }
.spn-switch__track { position: relative; flex: none; inline-size: 2rem; block-size: 1.15rem; border-radius: 99px; background: var(--ds-neutral-line); transition: background-color var(--ds-dur) var(--ds-ease); }
.spn-switch__dot { position: absolute; inset-block-start: 0.15rem; inset-inline-start: 0.15rem; inline-size: 0.85rem; block-size: 0.85rem; border-radius: 50%; background: #fff; transition: inset-inline-start var(--ds-dur) var(--ds-ease); }
.spn-switch.is-on .spn-switch__track { background: var(--ds-action); }
.spn-switch.is-on .spn-switch__dot { inset-inline-start: 1rem; }
.spn-hours { border: 0; margin: var(--ds-space-4) 0 0; padding: 0; }
.spn-hours legend { font-weight: var(--ds-fw-bold); margin-block-end: var(--ds-space-2); }
.spn-choices { display: flex; flex-wrap: wrap; gap: var(--ds-space-2); }
.spn-choices--col { flex-direction: column; margin-block-start: var(--ds-space-2); }
.spn-choice { position: relative; display: inline-flex; }
.spn-choice input { position: absolute; opacity: 0; inline-size: 1px; block-size: 1px; }
.spn-choice > span { display: inline-flex; align-items: center; min-block-size: 2.75rem; padding-inline: var(--ds-space-4); border-radius: var(--ds-radius-pill); border: 1px solid var(--ds-line); background: var(--ds-surface); font-weight: var(--ds-fw-semibold); cursor: pointer; }
.spn-choice--wide > span { display: grid; gap: 0.1rem; border-radius: var(--ds-radius-control); padding: var(--ds-space-2) var(--ds-space-3); inline-size: 100%; }
.spn-choice--wide small { font-weight: var(--ds-fw-regular); color: var(--ds-text-2); }
.spn-choice input:checked + span { background: var(--ds-mint); border-color: var(--ds-mint-strong); color: var(--ds-deep); }
.spn-choice input:focus-visible + span { outline: var(--ds-focus-width) solid var(--ds-focus); outline-offset: var(--ds-focus-offset); }
.spn-fold { margin-block-start: var(--ds-space-4); border-block-start: 1px solid var(--ds-line); padding-block-start: var(--ds-space-3); }
.spn-fold summary { cursor: pointer; font-weight: var(--ds-fw-semibold); min-block-size: 2.25rem; display: flex; align-items: center; }
.spn-hint { margin: var(--ds-space-2) 0; font-size: var(--ds-fs-sm); color: var(--ds-text-2); line-height: var(--ds-lh-body); }
.spn-quiet { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 8rem), 1fr)); gap: var(--ds-space-3); }
.spn-quiet input { inline-size: 100%; }
.spn-how { margin: var(--ds-space-2) 0 0; padding-inline-start: var(--ds-space-4); display: grid; gap: var(--ds-space-2); font-size: var(--ds-fs-sm); line-height: var(--ds-lh-body); }
.spn-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--ds-space-2) var(--ds-space-3); margin-block-start: var(--ds-space-4); }
.spn-foot .ds-btn { margin-inline-start: auto; }
.spn-status { margin: 0; font-size: var(--ds-fs-sm); color: var(--ds-text-2); flex: 1 1 8rem; }
.spn-status.is-ok { color: var(--ds-success); }
.spn-status.is-error { color: var(--ds-danger); }
.spc-state.is-on { margin: 0; font-weight: var(--ds-fw-semibold); color: var(--ds-success); }
.spc-link { display: grid; gap: var(--ds-space-2); }
.spc-link label { font-weight: var(--ds-fw-semibold); }
.spc-link__input { inline-size: 100%; min-block-size: var(--ds-control-h); font-family: var(--ds-font-mono); font-size: var(--ds-fs-xs); direction: ltr; text-align: left; border: 1px solid var(--ds-control-line); border-radius: var(--ds-radius-control); padding-inline: var(--ds-space-3); background: var(--ds-bg); }
.spc-open { justify-self: start; font-weight: var(--ds-fw-semibold); color: var(--ds-action); }
.spc-stop { margin-block-start: var(--ds-space-4); border: 0; background: none; padding: var(--ds-space-2) 0; color: var(--ds-danger); font: inherit; font-weight: var(--ds-fw-semibold); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .spn-switch__track, .spn-switch__dot { transition: none; } }
/* ---- END therapist notices + calendar sync ---- */
/* ---- schedule offers: the therapist proposes another time / holds the next session; the client answers (schedule-offers.js) ---- */
.so-cards { display: grid; gap: var(--ds-space-3); margin-block-end: var(--ds-space-5); }
.so-cards__title { display: flex; align-items: center; gap: var(--ds-space-2); margin: 0; }
.so-cards__list { display: grid; gap: var(--ds-space-3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); }
.so-card { display: grid; gap: var(--ds-space-3); padding: var(--ds-space-4); border-inline-start: 4px solid var(--ds-mint-strong); }
.so-card__top { display: flex; align-items: center; gap: var(--ds-space-3); }
.so-card__top > div { min-inline-size: 0; }
.so-avatar { inline-size: 44px; block-size: 44px; border-radius: 50%; object-fit: cover; flex: none; }
.so-times { display: grid; gap: var(--ds-space-2); margin: 0; }
.so-times > div { display: grid; gap: 0.15rem; padding: var(--ds-space-2) var(--ds-space-3); border-radius: var(--ds-radius-control); background: var(--ds-bg); }
.so-times dt { font-size: var(--ds-fs-sm); color: var(--ds-text-2); }
.so-times dd { margin: 0; font-weight: var(--ds-fw-semibold); }
.so-times__old dd { color: var(--ds-text-2); }
.so-times__new { background: var(--ds-mint) !important; }
.so-note { margin: 0; overflow-wrap: anywhere; }
.so-card__actions { display: grid; gap: var(--ds-space-2); }
.so-card .ds-text-sm, .so-card p { margin: 0; }
.so-apptnote { color: var(--ds-deep); font-weight: var(--ds-fw-semibold); }
.so-summary { display: grid; gap: var(--ds-space-1); margin-block-end: var(--ds-space-3); }
fieldset.so-pick, fieldset.so-formats { border: 0; padding: 0; margin: var(--ds-space-3) 0; }
.so-time { cursor: pointer; }
.so-time[aria-pressed="true"], .so-formats .ds-chip:has(input:checked) { background: var(--ds-mint); border-color: var(--ds-mint-strong); color: var(--ds-deep); }
.so-time input:focus-visible + span, .so-formats input:focus-visible + span { outline: var(--ds-focus-width) solid var(--ds-focus); outline-offset: var(--ds-focus-offset); }
.so-cardnote { margin-block: var(--ds-space-2); display: flex; flex-wrap: wrap; align-items: center; gap: var(--ds-space-1) var(--ds-space-2); }
.so-pending { display: grid; gap: var(--ds-space-2); margin-block-end: var(--ds-space-4); }
.so-pending .ds-rows { display: grid; gap: var(--ds-space-2); margin: 0; padding: 0; list-style: none; }
.so-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--ds-space-2); padding: var(--ds-space-3); }
.so-row > div { min-inline-size: 0; flex: 1 1 14rem; }
.so-clientbtn { margin-block-start: var(--ds-space-2); }
/* ---- END schedule offers ---- */
/* ---- companion session cards + invite page (panel link, series) + in-person waitlist (feature 6/7, builder "client", participant-invite.js, companion-sessions.js, client-dashboard.js) ---- */
.cs-title { margin: 0; font-size: var(--ds-fs-lg); }
.cs-note { margin: 0; color: var(--ds-text-2); overflow-wrap: anywhere; }
.cs-link, .cs-series { display: grid; gap: var(--ds-space-2); margin-block: var(--ds-space-4); }
.cs-link p { margin: 0; }
.cs-series__list { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--ds-space-2); }
.cs-series__item { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--ds-space-2); padding: var(--ds-space-3); border-radius: var(--ds-radius-control); background: var(--ds-bg); }
.cs-series__item > span:first-child { font-weight: var(--ds-fw-semibold); }
.cs-cards { display: grid; gap: var(--ds-space-3); margin-block-end: var(--ds-space-5); }
.cs-cards__title { margin: 0; font-size: var(--ds-fs-lg); }
.cs-card { display: grid; gap: var(--ds-space-2); padding: var(--ds-space-4); border-inline-start: 4px solid var(--ds-sky, var(--ds-mint-strong)); }
.cs-card p { margin: 0; overflow-wrap: anywhere; }
.cs-card__top { display: flex; align-items: center; gap: var(--ds-space-3); }
.cs-card__top img { inline-size: 44px; block-size: 44px; border-radius: 50%; object-fit: cover; flex: none; }
.cs-card__top > div { min-inline-size: 0; }
.wl-place { margin: 0; color: var(--ds-text-2); font-size: var(--ds-fs-sm); overflow-wrap: anywhere; }
/* ---- END companion session cards + invite page + in-person waitlist ---- */
/* ---- clinician ratings (HAM-A, HAM-D; therapist client file + client «پیگیری من», clinician-ratings.js, 2026-10-22) ---- */
.clin { display: grid; gap: var(--ds-space-3); }
.clin p { margin: 0; overflow-wrap: anywhere; }
.clin-actions, .clin-form__actions, .clin-item__actions { display: flex; flex-wrap: wrap; gap: var(--ds-space-2); }
.clin-note { padding: var(--ds-space-3); border-radius: var(--ds-radius-control); background: var(--ds-bg); color: var(--ds-text-2); }
.clin-h4 { margin: var(--ds-space-2) 0 0; font-size: var(--ds-fs-md); }
.clin-trend { display: grid; gap: var(--ds-space-2); padding: var(--ds-space-3); border-radius: var(--ds-radius-control); background: var(--ds-bg); }
.clin-trend__head, .clin-item__top { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--ds-space-1) var(--ds-space-3); }
.clin-score { font-weight: var(--ds-fw-semibold); color: var(--ds-deep); }
.clin-chart { max-block-size: 180px; }
.clin-list { display: grid; gap: var(--ds-space-2); margin: 0; padding: 0; list-style: none; }
.clin-item { display: grid; gap: var(--ds-space-2); padding: var(--ds-space-3); border: 1px solid var(--ds-line); border-radius: var(--ds-radius-control); background: var(--ds-surface); min-inline-size: 0; }
.clin-item__meta { display: flex; flex-wrap: wrap; gap: var(--ds-space-1) var(--ds-space-3); }
.clin-tags { display: flex; flex-wrap: wrap; gap: var(--ds-space-1); }
.clin-item__text { color: var(--ds-text-2); }
.clin-lines { display: grid; gap: var(--ds-space-2); margin: var(--ds-space-2) 0 0; padding: 0; list-style: none; }
.clin-lines li { display: grid; gap: 2px; padding-block-end: var(--ds-space-2); border-block-end: 1px solid var(--ds-line); }
.clin-line__a { font-weight: var(--ds-fw-semibold); color: var(--ds-deep); }
.clin-line__n { color: var(--ds-text-2); font-size: var(--ds-fs-sm); white-space: pre-line; }
.clin-picks { display: grid; gap: var(--ds-space-2); grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); }
.clin-pick { display: grid; gap: var(--ds-space-1); text-align: start; padding: var(--ds-space-4); border: 1px solid var(--ds-control-line); border-radius: var(--ds-radius-card); background: var(--ds-surface); color: var(--ds-text); font: inherit; cursor: pointer; }
.clin-pick:hover { border-color: var(--ds-mint-strong); background: var(--ds-mint); }
.clin-pick:focus-visible { outline: var(--ds-focus-width) solid var(--ds-focus); outline-offset: var(--ds-focus-offset); }
.clin-form__body { display: grid; gap: var(--ds-space-4); }
.clin-form__meta { display: grid; gap: var(--ds-space-3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }
.clin-form__meta select, .clin-form__meta input[type="date"] { inline-size: 100%; }
.clin-qs { display: grid; gap: var(--ds-space-3); margin: 0; padding: 0; list-style: none; }
.clin-q fieldset { margin: 0; padding: var(--ds-space-3); border: 1px solid var(--ds-line); border-radius: var(--ds-radius-control); min-inline-size: 0; display: grid; gap: var(--ds-space-2); }
.clin-q legend { padding: 0 var(--ds-space-1); font-weight: var(--ds-fw-semibold); line-height: 1.7; }
.clin-q__n { display: inline-grid; place-items: center; min-inline-size: 1.75rem; block-size: 1.75rem; border-radius: var(--ds-radius-pill); background: var(--ds-mint); color: var(--ds-deep); font-size: var(--ds-fs-sm); }
.clin-q__opts { display: grid; gap: var(--ds-space-1); }
.clin-q__opts--row { grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr)); }
.clin-opt { display: flex; align-items: flex-start; gap: var(--ds-space-2); padding: var(--ds-space-2) var(--ds-space-3); border: 1px solid var(--ds-control-line); border-radius: var(--ds-radius-control); cursor: pointer; min-block-size: 44px; }
.clin-opt input { margin: 0; margin-block-start: 0.3em; flex: none; }
.clin-opt__v { flex: none; font-weight: var(--ds-fw-bold); color: var(--ds-deep); }
.clin-opt__l { min-inline-size: 0; overflow-wrap: anywhere; }
.clin-opt:has(input:checked) { background: var(--ds-mint); border-color: var(--ds-mint-strong); }
.clin-opt:has(input:focus-visible) { outline: var(--ds-focus-width) solid var(--ds-focus); outline-offset: var(--ds-focus-offset); }
.clin-q__note textarea, .clin-form__body textarea { inline-size: 100%; box-sizing: border-box; }
.clin-q__note summary, .clin-guide summary, .clin-item__details summary, .clin-table summary { cursor: pointer; color: var(--ds-action); }
.clin-shared { display: grid; gap: var(--ds-space-3); margin-block-start: var(--ds-space-4); }
.clin-shared__title { margin: 0; font-size: var(--ds-fs-lg); }
/* ---- END clinician ratings ---- */
/* ---- BEGIN FAQ page /faq/ (owner request 2026-10-22; page-templates/template-faq.php, assets/js/ds/faq.js) ----
   The counselling pages' hero (.ar-hero) with a search field, the topic chips of the directory (.dir-area), one section per topic with
   the pub-faq accordions, the .ar-cta banner. The search and the chips stay hidden until faq.js runs (all answers readable without it). */
.faq-page [hidden] { display: none !important; }
.faq-search { position: relative; inline-size: 100%; max-inline-size: 36rem; margin-block-start: var(--ds-space-1); }
.faq-search__icon { position: absolute; inset-block-start: 50%; inset-inline-start: var(--ds-space-4); transform: translateY(-50%); display: inline-grid; color: var(--ds-f-ink); pointer-events: none; }
.faq-search__input { inline-size: 100%; box-sizing: border-box; min-block-size: 3.5rem; padding-block: 0; padding-inline: 3.25rem 3.25rem; border: 1px solid var(--ds-control-line); border-radius: var(--ds-radius-pill); background: var(--ds-surface); color: var(--ds-text); font: inherit; font-size: var(--ds-fs-md); box-shadow: 0 10px 26px -18px rgba(23, 43, 42, 0.45); }
.faq-search__input::placeholder { color: var(--ds-text-2); opacity: 0.85; }
.faq-search__input:focus-visible { outline: var(--ds-focus-width) solid var(--ds-focus); outline-offset: 2px; border-color: var(--ds-f-ink); }
.faq-search__input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.faq-search__clear { position: absolute; inset-block-start: 50%; inset-inline-end: var(--ds-space-2); transform: translateY(-50%); display: inline-grid; place-items: center; inline-size: 2.5rem; block-size: 2.5rem; border: 0; border-radius: 50%; background: var(--ds-f-bg); color: var(--ds-f-ink); cursor: pointer; }
.faq-search__clear:focus-visible { outline: var(--ds-focus-width) solid var(--ds-focus); outline-offset: 2px; }
.faq-tools { display: grid; gap: var(--ds-space-1); margin-block: 0 var(--ds-space-6); min-inline-size: 0; }
.faq-chips { margin-block-end: 0; }
@media (min-width: 768px) { .faq-chips { flex-wrap: wrap; overflow: visible; } }   /* phones scroll the row; wider screens show every topic */
.faq-count { margin: 0; color: var(--ds-text-2); font-size: var(--ds-fs-sm); }
.faq-sec { margin-block: 0 var(--ds-space-10); scroll-margin-block-start: calc(var(--ds-header-h) + var(--ds-space-4)); }
.faq-item { scroll-margin-block-start: calc(var(--ds-header-h) + var(--ds-space-4)); border-radius: 18px; transition: border-color var(--ds-dur) var(--ds-ease), box-shadow var(--ds-dur) var(--ds-ease); }
.faq-item > summary { min-block-size: 3.5rem; padding-block: var(--ds-space-3); padding-inline: var(--ds-space-5); font-weight: var(--ds-fw-semibold); line-height: 1.7; }
.faq-item > summary:focus-visible { outline: var(--ds-focus-width) solid var(--ds-focus); outline-offset: 2px; border-radius: 18px; }
.faq-item[open] { border-color: var(--ds-f-violet-ink); box-shadow: var(--ds-shadow-card); }
.faq-item[open] > summary { color: var(--ds-f-violet-ink); }
.faq-item .faq-item__a { padding: 0 var(--ds-space-5) var(--ds-space-5); line-height: 1.9; }
.faq-item__list { margin: 0 0 var(--ds-space-3); padding-inline-start: var(--ds-space-5); display: grid; gap: var(--ds-space-1); color: var(--ds-text); }
.faq-item__links { display: flex; flex-wrap: wrap; gap: 0 var(--ds-space-5); margin: var(--ds-space-1) 0 0 !important; }
.faq-item__links .pub-textlink { min-block-size: 2.5rem; }
.faq-empty { display: grid; gap: var(--ds-space-2); justify-items: center; margin-block-end: var(--ds-space-10); }
.faq-empty p { margin: 0; }
.faq-empty__title { color: var(--ds-text); font-weight: var(--ds-fw-bold); }
.faq-page .cs-hero__center .ds-icon { color: var(--ds-f-ink); }
@media (max-width: 639.98px) {
	.faq-item > summary { padding-inline: var(--ds-space-4); }
	.faq-item .faq-item__a { padding: 0 var(--ds-space-4) var(--ds-space-4); }
	.faq-sec { margin-block-end: var(--ds-space-8); }
}
@media (prefers-reduced-motion: reduce) { .faq-item { transition: none; } }
@media (forced-colors: active) { .faq-search__input, .faq-item { border: 1px solid CanvasText; } .faq-item[open] > summary { color: LinkText; } }
/* ---- END FAQ page ---- */