/* ==========================================================================
   Visual layer (stage V). Loaded LAST, after public/client/specialist/admin, on every page.
   The owner asked (2026-10-15) for a site that is less text and more pictures and colour, in the spirit of the mobile
   apps: a gradient header card, one coloured picture per counselling area and per test, big touch tiles, short labels.
   Colours come from the families and gradients in tokens.css; text on a gradient is always white on a stop that keeps
   4.5:1, icons in a tile use the family ink (>= 3:1 on its background). Logical properties only.
   ========================================================================== */

/* ---------- colour families: set --ds-f-bg / --ds-f-ink for whatever carries the class ---------- */
.ds-f-teal   { --ds-f-bg: var(--ds-f-teal-bg);   --ds-f-ink: var(--ds-f-teal-ink); }
.ds-f-green  { --ds-f-bg: var(--ds-f-green-bg);  --ds-f-ink: var(--ds-f-green-ink); }
.ds-f-blue   { --ds-f-bg: var(--ds-f-blue-bg);   --ds-f-ink: var(--ds-f-blue-ink); }
.ds-f-sky    { --ds-f-bg: var(--ds-f-sky-bg);    --ds-f-ink: var(--ds-f-sky-ink); }
.ds-f-indigo { --ds-f-bg: var(--ds-f-indigo-bg); --ds-f-ink: var(--ds-f-indigo-ink); }
.ds-f-violet { --ds-f-bg: var(--ds-f-violet-bg); --ds-f-ink: var(--ds-f-violet-ink); }
.ds-f-pink   { --ds-f-bg: var(--ds-f-pink-bg);   --ds-f-ink: var(--ds-f-pink-ink); }
.ds-f-rose   { --ds-f-bg: var(--ds-f-rose-bg);   --ds-f-ink: var(--ds-f-rose-ink); }
.ds-f-red    { --ds-f-bg: var(--ds-f-red-bg);    --ds-f-ink: var(--ds-f-red-ink); }
.ds-f-orange { --ds-f-bg: var(--ds-f-orange-bg); --ds-f-ink: var(--ds-f-orange-ink); }
.ds-f-amber  { --ds-f-bg: var(--ds-f-amber-bg);  --ds-f-ink: var(--ds-f-amber-ink); }
.ds-f-slate  { --ds-f-bg: var(--ds-f-slate-bg);  --ds-f-ink: var(--ds-f-slate-ink); }

/* ---------- icon box ---------- */
.ds-ibox {
	display: inline-flex; align-items: center; justify-content: center; flex: none;
	inline-size: 3rem; block-size: 3rem; border-radius: 16px;
	background: var(--ds-f-bg, var(--ds-mint-strong)); color: var(--ds-f-ink, var(--ds-deep));
}
.ds-ibox--sm { inline-size: 2.25rem; block-size: 2.25rem; border-radius: 11px; }
.ds-ibox--lg { inline-size: 4rem; block-size: 4rem; border-radius: 20px; }
.ds-ibox .ds-icon { stroke-width: 1.8; }

/* ---------- tiles: one picture, one short label ---------- */
.ds-tiles { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--ds-space-3); grid-template-columns: repeat(auto-fill, minmax(8.75rem, 1fr)); }
.ds-tile {
	display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: var(--ds-space-2);
	min-block-size: var(--ds-control-h); padding: var(--ds-space-4) var(--ds-space-2);
	background: var(--ds-surface); border: 1px solid var(--ds-line); border-radius: var(--ds-radius-card);
	color: var(--ds-text); text-align: center; text-decoration: none; font: inherit; cursor: pointer;
	transition: transform var(--ds-dur) var(--ds-ease), box-shadow var(--ds-dur) var(--ds-ease), border-color var(--ds-dur) var(--ds-ease);
}
.ds-tile:hover, .ds-tile:focus-visible { border-color: var(--ds-f-ink, var(--ds-action)); box-shadow: var(--ds-shadow-card); transform: translateY(-2px); text-decoration: none; color: var(--ds-text); }
.ds-tile__label { font-size: var(--ds-fs-sm); font-weight: var(--ds-fw-semibold); line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ds-tile__sub { font-size: var(--ds-fs-xs); color: var(--ds-text-2); }
@media (max-width: 639.98px) {
	.ds-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--ds-space-2); }
	.ds-tile { padding: var(--ds-space-3) var(--ds-space-1); gap: var(--ds-space-1); border-radius: 14px; }
	.ds-tile .ds-ibox { inline-size: 2.75rem; block-size: 2.75rem; border-radius: 14px; }
	.ds-tile__label { font-size: var(--ds-fs-xs); }
}
@media (max-width: 359.98px) { .ds-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---------- feature card on a gradient ---------- */
.ds-feature {
	position: relative; overflow: hidden; isolation: isolate;
	display: flex; align-items: center; gap: var(--ds-space-4);
	inline-size: 100%; padding: var(--ds-space-5); border: 0; border-radius: 20px;
	background: var(--ds-grad-brand); color: #fff; text-align: start; text-decoration: none; font: inherit; cursor: pointer;
	box-shadow: var(--ds-shadow-card);
	--ds-focus: var(--ds-focus-on-dark);
}
div.ds-feature { cursor: default; }
.ds-feature::before, .ds-feature::after { content: ""; position: absolute; border-radius: 50%; pointer-events: none; z-index: -1; }
.ds-feature::before { inset-inline-end: -3.5rem; inset-block-start: -3.5rem; inline-size: 11rem; block-size: 11rem; background: rgba(255, 255, 255, 0.10); }
.ds-feature::after { inset-inline-start: -2rem; inset-block-end: -4rem; inline-size: 8rem; block-size: 8rem; background: rgba(0, 166, 147, 0.22); }
.ds-feature--night { background: var(--ds-grad-night); }
.ds-feature--berry { background: var(--ds-grad-berry); }
.ds-feature--sunset { background: var(--ds-grad-sunset); }
.ds-feature--slate { background: var(--ds-grad-slate); }
.ds-feature:hover { color: #fff; text-decoration: none; filter: brightness(1.04); }
.ds-feature__icon { flex: none; display: inline-grid; place-items: center; inline-size: 3.5rem; block-size: 3.5rem; border-radius: 50%; background: rgba(255, 255, 255, 0.16); color: #fff; }
.ds-feature__body { flex: 1 1 auto; min-inline-size: 0; display: grid; gap: 0.15rem; }
.ds-feature__title { display: block; margin: 0; font-size: var(--ds-fs-lg); font-weight: var(--ds-fw-bold); line-height: var(--ds-lh-tight); color: #fff; }
.ds-feature__sub { display: block; margin: 0; font-size: var(--ds-fs-sm); color: rgba(255, 255, 255, 0.86); }
.ds-feature__arrow { flex: none; color: #fff; opacity: 0.9; }
.ds-feature--stack { flex-direction: column; align-items: stretch; gap: var(--ds-space-3); }
.ds-feature__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--ds-space-2); }
.ds-feature__who { display: flex; align-items: center; gap: var(--ds-space-3); min-inline-size: 0; }
.ds-feature__who .client-avatar, .ds-feature__who .sp-avatar { inline-size: 3.5rem; block-size: 3.5rem; border: 2px solid rgba(255, 255, 255, 0.7); background: rgba(255, 255, 255, 0.2); color: #fff; font-size: var(--ds-fs-xl); }
.ds-feature__name { font-size: var(--ds-fs-xl); font-weight: var(--ds-fw-bold); color: #fff; line-height: var(--ds-lh-tight); }
.ds-feature .ds-pill { display: inline-flex; align-items: center; gap: 0.35rem; min-block-size: 2rem; padding: 0.25rem 0.8rem; border-radius: var(--ds-radius-pill); background: rgba(0, 0, 0, 0.24); color: #FDE68A; font-size: var(--ds-fs-xs); font-weight: var(--ds-fw-semibold); white-space: nowrap; }
.ds-feature .ds-pill--light { background: rgba(255, 255, 255, 0.18); color: #fff; }
.ds-feature .ds-btn--light, .ds-btn--light { background: #fff; color: var(--ds-deep); border-color: #fff; }
.ds-feature .ds-btn--light:hover, .ds-btn--light:hover { background: var(--ds-mint); color: var(--ds-deep); }
.ds-feature .ds-btn--glass { background: rgba(255, 255, 255, 0.16); color: #fff; border-color: rgba(255, 255, 255, 0.5); }
.ds-feature .ds-btn--glass:hover { background: rgba(255, 255, 255, 0.26); color: #fff; }
.ds-feature .ds-feature__actions { display: flex; flex-wrap: wrap; gap: var(--ds-space-2); }
.ds-feature--note { color: rgba(255, 255, 255, 0.86); font-size: var(--ds-fs-xs); }

/* ---------- stat card ---------- */
.ds-stats { display: grid; gap: var(--ds-space-3); grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); }
.ds-stat { display: flex; align-items: center; gap: var(--ds-space-3); padding: var(--ds-space-4); background: var(--ds-surface); border: 1px solid var(--ds-line); border-radius: var(--ds-radius-card); min-inline-size: 0; }
.ds-stat__body { display: grid; gap: 0.1rem; min-inline-size: 0; flex: 1 1 auto; }
.ds-stat__num { font-size: var(--ds-fs-xl); font-weight: var(--ds-fw-bold); line-height: 1.25; overflow-wrap: anywhere; }
.ds-stat__label { font-size: var(--ds-fs-xs); color: var(--ds-text-2); }
.ds-stat > .ds-btn { flex: none; }

/* ---------- coloured card (tests, shortcuts) ---------- */
.ds-tilecards { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--ds-space-3); grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); }
/* up to four test cards sit in ONE row on a desktop, compact (owner, 2026-10-15) */
@media (min-width: 900px) { .ds-tilecards { grid-template-columns: repeat(4, minmax(0, 1fr)); } .ds-tilecards > :nth-child(n+5) { display: none; } }
.ds-tilecard {
	position: relative; display: flex; flex-direction: column; gap: var(--ds-space-3); min-block-size: 100%;
	padding: var(--ds-space-4); border: 1px solid transparent; border-radius: 16px;
	background: var(--ds-f-bg, var(--ds-mint)); color: var(--ds-text); text-decoration: none; font: inherit; text-align: start; inline-size: 100%; cursor: pointer;
	transition: transform var(--ds-dur) var(--ds-ease), border-color var(--ds-dur) var(--ds-ease);
}
.ds-tilecard:hover { border-color: var(--ds-f-ink); transform: translateY(-2px); text-decoration: none; color: var(--ds-text); }
.ds-tilecard .ds-ibox { background: rgba(255, 255, 255, 0.78); inline-size: 3rem; block-size: 3rem; border-radius: 14px; }
.ds-tilecard .ds-ibox .ds-icon { inline-size: 1.5rem; block-size: 1.5rem; }
.ds-tilecard__title { margin: 0; font-size: var(--ds-fs-md); font-weight: var(--ds-fw-bold); line-height: var(--ds-lh-tight); }
.ds-tilecard__title a { color: inherit; text-decoration: none; }
.ds-tilecard__title a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.ds-tilecard__meta { margin: 0; color: var(--ds-text-2); font-size: var(--ds-fs-xs); }
.ds-tilecard__cta { margin-block-start: auto; align-self: flex-start; display: inline-flex; align-items: center; gap: 0.3rem; min-block-size: 2.25rem; padding-inline: var(--ds-space-3); border-radius: var(--ds-radius-pill); background: var(--ds-surface); color: var(--ds-f-ink); font-weight: var(--ds-fw-bold); font-size: var(--ds-fs-sm); }
/* a horizontal, swipeable row on phones */
@media (max-width: 639.98px) {
	.ds-tilecards--row { display: flex; max-inline-size: 100%; overflow-x: auto; scroll-snap-type: x mandatory; padding-block-end: var(--ds-space-2); scrollbar-width: none; }
	.pub-section .ds-tilecards--row { margin-inline: calc(-1 * var(--ds-gutter)); padding-inline: var(--ds-gutter); max-inline-size: none; }
	.ds-tilecards--row::-webkit-scrollbar { display: none; }
	.ds-tilecards--row > * { flex: 0 0 11.5rem; scroll-snap-align: start; }
}

/* ---------- step card ---------- */
.ds-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--ds-space-3); grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); counter-reset: dsstep; }
@media (min-width: 1024px) { .ds-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.ds-step { position: relative; display: grid; gap: var(--ds-space-3); padding: var(--ds-space-5); background: var(--ds-surface); border: 1px solid var(--ds-line); border-radius: var(--ds-radius-card); }
.ds-step__num { position: absolute; inset-inline-end: var(--ds-space-4); inset-block-start: var(--ds-space-4); display: inline-grid; place-items: center; inline-size: 1.75rem; block-size: 1.75rem; border-radius: 50%; background: var(--ds-f-bg); color: var(--ds-f-ink); font-size: var(--ds-fs-xs); font-weight: var(--ds-fw-bold); }
.ds-step__title { margin: 0; font-size: var(--ds-fs-md); font-weight: var(--ds-fw-bold); }
.ds-step__text { margin: 0; color: var(--ds-text-2); font-size: var(--ds-fs-sm); }

/* ---------- section head with a picture ---------- */
.ds-sechead { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--ds-space-2) var(--ds-space-4); margin-block-end: var(--ds-space-4); }
.ds-sechead__title { display: flex; align-items: center; gap: var(--ds-space-3); margin: 0; font-size: var(--ds-fs-xl); line-height: var(--ds-lh-tight); flex: 1 1 0; min-inline-size: 0; }
.ds-sechead > .pub-textlink, .ds-sechead > .ds-btn { flex: none; }
@media (max-width: 639.98px) { .ds-tiles--8 > li:nth-child(n+9) { display: none; } }
.ds-sechead__title .ds-ibox { inline-size: 2.5rem; block-size: 2.5rem; border-radius: 12px; }
.ds-sechead p { margin: 0; color: var(--ds-text-2); font-size: var(--ds-fs-sm); flex-basis: 100%; }
.ds-sechead .pub-textlink, .ds-sechead .ds-btn { margin-inline-start: auto; }

/* ---------- coloured chips (areas on a specialist card) ---------- */
.tag-pill.ds-chip-c { display: inline-flex; align-items: center; gap: 0.3rem; background: var(--ds-f-bg); color: var(--ds-f-ink); border-color: transparent; font-weight: var(--ds-fw-semibold); }
.tag-pill.ds-chip-c:hover { border-color: var(--ds-f-ink); background: var(--ds-f-bg); color: var(--ds-f-ink); }
.tag-pill.ds-chip-c .ds-icon { inline-size: 1em; block-size: 1em; }

/* ---------- rows with a picture (to-dos, attention, lists) ---------- */
.ds-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--ds-space-2); }
.ds-row { display: flex; align-items: center; gap: var(--ds-space-3); min-block-size: var(--ds-control-h); padding: var(--ds-space-3) var(--ds-space-4); background: var(--ds-surface); border: 1px solid var(--ds-line); border-radius: var(--ds-radius-control); color: var(--ds-text); text-decoration: none; font: inherit; text-align: start; inline-size: 100%; cursor: pointer; }
.ds-row:hover { border-color: var(--ds-f-ink, var(--ds-action)); background: var(--ds-f-bg, var(--ds-mint)); text-decoration: none; color: var(--ds-text); }
div.ds-row, li.ds-row { cursor: default; }
.ds-row__body { flex: 1 1 auto; min-inline-size: 0; display: grid; gap: 0.1rem; }
.ds-row__title { font-weight: var(--ds-fw-semibold); font-size: var(--ds-fs-sm); }
.ds-row__sub { font-size: var(--ds-fs-xs); color: var(--ds-text-2); }
.ds-row__end { flex: none; color: var(--ds-text-2); }

/* ==========================================================================
   Public site: the hero becomes the gradient card of the apps; sections get pictures.
   ========================================================================== */
.pub-hero, body.is-ravanline .pub-hero { position: relative; overflow: hidden; isolation: isolate; background: var(--ds-grad-brand); color: #fff; border-block-end: 0; padding-block: var(--ds-space-10) var(--ds-space-10); }
.pub-hero::before, .pub-hero::after { content: ""; position: absolute; border-radius: 50%; pointer-events: none; z-index: -1; }
.pub-hero::before { inset-inline-end: -8rem; inset-block-start: -10rem; inline-size: 26rem; block-size: 26rem; background: rgba(255, 255, 255, 0.08); }
.pub-hero::after { inset-inline-start: -6rem; inset-block-end: -12rem; inline-size: 22rem; block-size: 22rem; background: rgba(0, 166, 147, 0.28); }
.pub-hero h1 { color: #fff; }
.pub-hero__lead { color: rgba(255, 255, 255, 0.88); }
.pub-hero .btn--primary, .pub-hero .ds-btn--primary { background: #fff; color: var(--ds-deep); border-color: #fff; box-shadow: var(--ds-shadow-card); }
.pub-hero .btn--primary:hover, .pub-hero .ds-btn--primary:hover { background: var(--ds-mint); color: var(--ds-deep); }
.pub-hero .pub-textlink { color: #fff; }
.pub-hero .pub-textlink:hover { color: #fff; opacity: 0.9; }
.pub-hero__quick { color: rgba(255, 255, 255, 0.88); }
.pub-hero .pill { background: rgba(255, 255, 255, 0.14); border-color: rgba(255, 255, 255, 0.5); color: #fff; }
.pub-hero .pill:hover { background: rgba(255, 255, 255, 0.26); color: #fff; }
.pub-hero .pub-facts { color: rgba(255, 255, 255, 0.92); }
.pub-hero .pub-facts .ds-icon { color: #FDE68A; }
.pub-hero { --ds-focus: var(--ds-focus-on-dark); }
.pub-hero .pub-panel { --ds-focus: #005B50; color: var(--ds-text); border: 0; box-shadow: var(--ds-shadow-card); border-radius: 20px; }
.pub-hero .pub-panel p { color: var(--ds-text-2); }
.pub-hero .pub-panel .pub-textlink { color: var(--ds-deep); }
.pub-avatars__item { inline-size: 4rem; block-size: 4rem; }
.pub-panel__tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--ds-space-2); margin-block-start: var(--ds-space-4); }
.pub-panel__tiles .ds-tile { padding: var(--ds-space-2) 0.25rem; border-radius: 12px; gap: 0.25rem; }
.pub-panel__tiles .ds-tile .ds-ibox { inline-size: 2.5rem; block-size: 2.5rem; border-radius: 12px; }
.pub-panel__tiles .ds-tile__label { font-size: 0.8125rem; }

/* sections: a tinted band alternates with white; headings carry a coloured picture */
.pub-section--tint { background: var(--ds-bg); }

/* specialists band and the "for specialists" strip */
.pub-pro { background: var(--ds-grad-night); color: #fff; border: 0; border-radius: 20px; position: relative; overflow: hidden; isolation: isolate; --ds-focus: var(--ds-focus-on-dark); }
.pub-pro::before { content: ""; position: absolute; inset-inline-end: -4rem; inset-block-start: -5rem; inline-size: 14rem; block-size: 14rem; border-radius: 50%; background: rgba(255, 255, 255, 0.10); z-index: -1; }
.pub-pro h2, .pub-pro p, .pub-pro ul { color: #fff; }
.pub-pro p, .pub-pro ul { color: rgba(255, 255, 255, 0.86); }
.pub-pro .btn--outline, .pub-pro .ds-btn--secondary { background: #fff; color: #1E3A8A; border-color: #fff; }
.pub-pro .btn--outline:hover { background: #E0ECFF; color: #1E3A8A; }
.pub-pro .pub-textlink { color: #fff; }
.pub-pro__head { display: flex; align-items: center; gap: var(--ds-space-3); margin-block-end: var(--ds-space-2); }
.pub-pro__head .ds-feature__icon { inline-size: 3rem; block-size: 3rem; }
.pub-pro__head h2 { margin: 0; }

/* costs: four picture rows + a price card with a gradient head */
.pub-costs__rows { display: grid; gap: var(--ds-space-3); }
.pub-price { padding: 0; overflow: hidden; border-radius: 20px; }
.pub-price__head { display: flex; align-items: center; gap: var(--ds-space-3); padding: var(--ds-space-4) var(--ds-space-5); background: var(--ds-grad-brand); color: #fff; }
.pub-price__head h3 { margin: 0; color: #fff; font-size: var(--ds-fs-lg); }
.pub-price__head .ds-feature__icon { inline-size: 2.75rem; block-size: 2.75rem; }
.pub-price__body { display: grid; gap: var(--ds-space-3); padding: var(--ds-space-5); }
.pub-price__value { font-size: var(--ds-fs-lg); color: var(--ds-deep); }

/* specialist cards: a little more picture */
.specialist-card .specialist-card__photo { aspect-ratio: 4 / 3; }
.specialist-card .ds-btn--secondary { background: var(--ds-action); color: #fff; border-color: var(--ds-action); }
.specialist-card .ds-btn--secondary:hover { background: var(--ds-action-hover); color: #fff; }
.specialist-card:hover { box-shadow: var(--ds-shadow-card); }

/* ==========================================================================
   Panels (client, specialist, admin): a coloured picture next to every destination; sections with pictures.
   ========================================================================== */
.dashboard-nav__item > svg { flex: none; inline-size: 2.25rem; block-size: 2.25rem; padding: 0.5rem; border-radius: 11px; background: var(--ds-tint); color: var(--ds-deep); }
.dashboard-nav__item.is-active > svg, .dashboard-nav__item[aria-current="page"] > svg { background: var(--ds-action); color: #fff; }
.dashboard-nav__item--logout > svg { background: var(--ds-danger-bg); color: var(--ds-danger); }
.dashboard-sidebar__user { background: var(--ds-grad-brand) !important; color: #fff !important; border-radius: 20px !important; }
.dashboard-sidebar__user .dashboard-sidebar__name, .dashboard-sidebar__user strong, .dashboard-sidebar__user small { color: #fff !important; }
.dashboard-sidebar__user .dashboard-sidebar__avatar { background: rgba(255, 255, 255, 0.22) !important; color: #fff !important; border: 2px solid rgba(255, 255, 255, 0.6); }
.dashboard-sidebar__user .notif-bell { color: #fff; background: rgba(255, 255, 255, 0.16); border-color: transparent; }
.ds-tabbar .ds-tabbar__item[aria-current="page"] .ds-icon, .ds-tabbar .ds-tabbar__item.is-active .ds-icon { background: var(--ds-mint-strong); border-radius: 10px; padding: 0.2rem; box-sizing: content-box; }

/* client home */
#mentayar-client-dashboard .dashboard-content { min-inline-size: 0; }
.client-home, .client-home__main, .client-home__side { min-inline-size: 0; }
/* one auto grid track must never grow to the max-content of a swipeable row (4 cards side by side): the track is minmax(0, 1fr) */
.client-home { grid-template-columns: minmax(0, 1fr); }
.client-home__main, .client-home__side { grid-template-columns: minmax(0, 1fr); }
.client-home__main > *, .client-home__side > * { min-inline-size: 0; }
@media (min-width: 1100px) { .client-home { grid-template-columns: minmax(0, 1.6fr) minmax(16rem, 1fr); } }
.client-home { gap: var(--ds-space-5); }
.client-home__hero { display: grid; gap: var(--ds-space-3); }
.client-services { display: grid; gap: var(--ds-space-3); }
.client-home .client-h2 { font-size: var(--ds-fs-xl); }
.client-home .client-box { margin-block-end: 0; }
.client-todo { display: none; }
.client-home__tests .ds-tilecards { grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); }
.client-subbox { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ds-space-3); }
.client-subbox .client-box__head { flex: 1 1 100%; }

/* specialist home */
.sp-home { gap: var(--ds-space-5); }
.sp-today__item { border-inline-start: 4px solid var(--ds-f-ink, var(--ds-action)); }
.sp-today__time { display: inline-flex; align-items: center; justify-content: center; min-inline-size: 3.5rem; padding: 0.3rem 0.6rem; border-radius: 10px; background: var(--ds-f-teal-bg); color: var(--ds-f-teal-ink); }
.sp-attn__item { background: var(--ds-f-amber-bg); border-color: transparent; }
.sp-attn__item > span { display: flex; align-items: center; gap: var(--ds-space-3); }

/* print: no gradients */
@media print { .ds-feature, .pub-hero, .pub-pro, .pub-price__head, .dashboard-sidebar__user { background: #fff !important; color: #000 !important; box-shadow: none; } }
@media (forced-colors: active) { .ds-tile, .ds-feature, .ds-stat, .ds-tilecard, .ds-row, .ds-step { border: 1px solid CanvasText; } }

/* ---------- specialist card facts as icon chips; a letter instead of an empty photo box ---------- */
.ds-factchips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--ds-space-2); }
.ds-factchips li { display: inline-flex; align-items: center; gap: 0.35rem; min-block-size: 2rem; padding-inline: var(--ds-space-2); border-radius: var(--ds-radius-sm); background: var(--ds-tint); color: var(--ds-text); font-size: var(--ds-fs-xs); }
.ds-factchips .ds-icon { color: var(--ds-deep); flex: none; }
.specialist-card__photo--initial { display: grid; place-items: center; background: var(--ds-grad-brand); }
.specialist-card__photo--initial span { font-size: 3rem; font-weight: var(--ds-fw-bold); color: #fff; }
.client-card .specialist-card__photo:has(> .specialist-card__photo--initial), #mentayar-directory-results .client-card .specialist-card__photo:has(> .specialist-card__photo--initial) { aspect-ratio: 4 / 3; block-size: auto; height: auto; }

/* specialist home: stat cards with a picture */
.sp-statcard__head { display: flex; align-items: flex-start; gap: var(--ds-space-3); }
.sp-statcard__head > div { min-inline-size: 0; flex: 1; }
.sp-statcard__head p { margin: 0; }
.sp-statcard .sp-h2 { margin-block-end: var(--ds-space-1); }
.sp-next .sp-avatar { inline-size: 3.5rem; block-size: 3.5rem; font-size: var(--ds-fs-xl); }
.sp-home .sp-h2.ds-sechead__title { font-size: var(--ds-fs-xl); margin-block-end: var(--ds-space-3); }
.sp-attn__item { background: var(--ds-surface); }
.client-card .specialist-card__photo--placeholder.specialist-card__photo--initial, #mentayar-directory-results .client-card .specialist-card__photo--placeholder.specialist-card__photo--initial { display: grid; place-items: center; background: var(--ds-grad-brand); background-image: var(--ds-grad-brand); inline-size: 100%; block-size: 100%; }
.client-card .specialist-card__photo--initial::before, .client-card .specialist-card__photo--initial::after { content: none; }

/* ==========================================================================
   Specialist profile (stage V): the header is the gradient card, facts are icon chips, section headings carry a picture.
   ========================================================================== */
.client-profile .specialist-profile__header { position: relative; overflow: hidden; isolation: isolate; display: flex; flex-wrap: wrap; align-items: center; gap: var(--ds-space-5); padding: var(--ds-space-6); border-radius: 20px; background: var(--ds-grad-brand); color: #fff; box-shadow: var(--ds-shadow-card); --ds-focus: var(--ds-focus-on-dark); }
.client-profile .specialist-profile__header::before { content: ""; position: absolute; inset-inline-end: -4rem; inset-block-start: -5rem; inline-size: 14rem; block-size: 14rem; border-radius: 50%; background: rgba(255, 255, 255, 0.10); z-index: -1; }
.client-profile .specialist-profile__header::after { content: ""; position: absolute; inset-inline-start: -3rem; inset-block-end: -5rem; inline-size: 10rem; block-size: 10rem; border-radius: 50%; background: rgba(0, 166, 147, 0.25); z-index: -1; }
.client-profile .specialist-profile__photo { inline-size: 8.5rem; block-size: 8.5rem; border-radius: 24px; border: 3px solid rgba(255, 255, 255, 0.85); box-shadow: var(--ds-shadow-card); background: rgba(255, 255, 255, 0.18); }
.client-profile .specialist-profile__photo .specialist-card__photo--initial { display: grid; place-items: center; inline-size: 100%; block-size: 100%; background: rgba(255, 255, 255, 0.16); }
.client-profile .specialist-profile__photo .specialist-card__photo--initial span { font-size: 3rem; font-weight: var(--ds-fw-bold); color: #fff; }
.client-profile .specialist-profile__header h1, .client-profile .specialist-profile__title { color: #fff; }
.client-profile .specialist-profile__title { color: rgba(255, 255, 255, 0.86); }
.client-profile .specialist-profile__header .credential-pill { background: rgba(255, 255, 255, 0.16); color: #fff; border-color: rgba(255, 255, 255, 0.4); }
.client-profile .specialist-profile__stats { gap: var(--ds-space-3) var(--ds-space-5); }
.client-profile .specialist-profile__stat { display: flex; align-items: center; gap: var(--ds-space-2); }
.client-profile .specialist-profile__header .specialist-profile__stat-badge { background: #fff; color: var(--ds-deep); border-radius: var(--ds-radius-pill); min-block-size: 2rem; padding-inline: var(--ds-space-3); display: inline-flex; align-items: center; font-weight: var(--ds-fw-bold); }
.client-profile .specialist-profile__header .specialist-profile__stat-badge--amber { color: var(--ds-f-amber-ink); }
.client-profile .specialist-profile__header .specialist-profile__stat-label { color: rgba(255, 255, 255, 0.86); }
.client-profile .section-heading--v { display: flex; align-items: center; gap: var(--ds-space-3); }
.client-profile .section-heading--v .section-heading__icon { background: var(--ds-f-bg); color: var(--ds-f-ink); inline-size: 2.5rem; block-size: 2.5rem; border-radius: 12px; }
.client-profile .section-heading--v .section-heading__icon svg { inline-size: 1.25rem; block-size: 1.25rem; }
.ds-factchips--lg li { min-block-size: 2.5rem; padding-inline: var(--ds-space-3); font-size: var(--ds-fs-sm); background: var(--ds-surface); border: 1px solid var(--ds-line); }
.ds-factchips__price { background: var(--ds-f-amber-bg) !important; border-color: transparent !important; }
.ds-factchips__price .ds-icon { color: var(--ds-f-amber-ink); }
@media (max-width: 639.98px) {
	.client-profile .specialist-profile__header { padding: var(--ds-space-5); gap: var(--ds-space-4); }
	.client-profile .specialist-profile__photo { inline-size: 6rem; block-size: 6rem; border-radius: 18px; }
}

/* ==========================================================================
   Admin panel (stage V): gradient hero, pictures on the queue, headings and facts.
   ========================================================================== */
body.ds-admin .dash-hero { background: var(--ds-grad-brand); border-radius: 20px; box-shadow: var(--ds-shadow-card); }
body.ds-admin .dashboard-content > section > h1::before { content: none; }
body.ds-admin .dashboard-content > section > h1 { display: flex; align-items: center; gap: var(--ds-space-3); }
body.ds-admin .ds-queue__link { gap: var(--ds-space-3); }
body.ds-admin .ds-queue__pic { flex: none; }
body.ds-admin .ds-queue__item { border-inline-start-width: 1px; }
body.ds-admin .ds-queue__item--urgent { border-inline-start: 4px solid var(--ds-f-red-ink); background: var(--ds-f-red-bg); }
body.ds-admin .ds-queue__item--action { border-inline-start: 4px solid var(--ds-f-amber-ink); background: var(--ds-f-amber-bg); }
body.ds-admin .ds-queue__item--urgent .ds-queue__link:hover, body.ds-admin .ds-queue__item--action .ds-queue__link:hover { background: rgba(255, 255, 255, 0.5); }
body.ds-admin .dashboard-content h2.ds-sechead__title { display: flex; align-items: center; gap: var(--ds-space-3); }
body.ds-admin .ds-disclosure > summary .ds-ibox { margin-inline-end: var(--ds-space-1); }
body.ds-admin .ds-facts > div { border-block-start: 4px solid var(--ds-action); }
body.ds-admin .ds-facts > div:nth-child(4n+2) { border-block-start-color: var(--ds-f-blue-ink); }
body.ds-admin .ds-facts > div:nth-child(4n+3) { border-block-start-color: var(--ds-f-violet-ink); }
body.ds-admin .ds-facts > div:nth-child(4n+4) { border-block-start-color: var(--ds-f-amber-ink); }
body.ds-admin .ds-facts dd { color: var(--ds-deep); }
body.ds-admin .dashboard-nav__group-toggle { font-weight: var(--ds-fw-bold); color: var(--ds-text-2); }

/* ---------- Header on a desktop: the menu never runs under the action buttons ---------- */
@media (min-width: 1200px) {
	.site-nav { margin-inline-start: 16px; overflow: hidden; }
	html[lang^="en"] .site-nav ul li a, html[lang^="en"] .site-nav__more > summary { padding-inline: 10px; }
	.site-header__actions .btn--primary { white-space: nowrap; }
}

/* ==========================================================================
   Footer: the dark footer of the original site (owner, 2026-10-15), one-line about text, no emergency note.
   ========================================================================== */
.site-footer { background: #0F2231; color: #CBD5E1; border-block-start: 0; }
body.is-ravanline .site-footer { background: #1F2A2E; }
.site-footer__top { border-block-end: 1px solid rgba(255, 255, 255, 0.10); }
.site-footer__top p { color: #CBD5E1; max-inline-size: none; font-size: var(--ds-fs-md); }
@media (min-width: 900px) { .site-footer__top p { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } }
.site-footer__inner { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--ds-space-6); }
@media (max-width: 1023.98px) { .site-footer__inner { grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); } }
.site-footer__heading, .site-footer h4 { color: #fff; }
.site-footer a { color: #CBD5E1; }
.site-footer a:hover { color: #fff; }
.site-footer__col p { color: #94A3B8; }
.site-footer__social a { background: rgba(255, 255, 255, 0.10); color: #fff; border-color: transparent; }
.site-footer__social a:hover { background: var(--ds-action); color: #fff; }
.site-footer__bottom { color: #94A3B8; border-block-start: 1px solid rgba(255, 255, 255, 0.10); }
.site-footer { --ds-focus: var(--ds-focus-on-dark); }

/* outcome monitoring + SOAP (2026-10-15) */
.sp-fit__flags { display: flex; flex-wrap: wrap; gap: var(--ds-space-2); margin-block: var(--ds-space-2); }
.sp-note-kind { margin-block-end: var(--ds-space-3); }
.sp-soap { display: grid; gap: 0; }
.sp-soap-view { margin: var(--ds-space-2) 0 0; display: grid; gap: var(--ds-space-2); }
.sp-soap-view dt { font-size: var(--ds-fs-xs); font-weight: var(--ds-fw-bold); color: var(--ds-deep); }
.sp-soap-view dd { margin: 0; }
.sp-soap-view > div { border-inline-start: 3px solid var(--ds-f-blue-ink); padding-inline-start: var(--ds-space-3); }
.ds-at-risk td.is-flags { font-size: var(--ds-fs-xs); }