/*!
 * مِهَار | Mihhar — The public half
 * ------------------------------------------------------------------
 * Service pages, public profiles, company pages and the community.
 *
 * A separate sheet from `app.css` because it is read by people who are
 * not signed in, on pages that are not the portal. Keeping them apart
 * means a portal rule cannot leak onto a page a stranger sees, and a
 * public page's typography cannot quietly restyle the dashboard.
 *
 * It builds on `app.css` rather than repeating it: buttons, cards,
 * chips, empty states and the type ramp are already there. What is here
 * is what only the public pages have — the buy box, the profile header,
 * the timeline, the feed.
 *
 * Every layout below is intrinsic: `grid-template-columns` on
 * `minmax(0, …)` tracks that collapse by themselves, and one breakpoint
 * per component rather than a global set of device widths. Nothing
 * measures the viewport in JavaScript, and nothing here is wider than
 * the box it is given — which is what makes these pages correct inside
 * the platform's own root and inside anybody's theme.
 */

/* `--mh-text-4` is documented in the palette as decorative only —
   3.4:1, never body. The four rules below were using it for content a
   person actually reads: a delivery promise, a date range, a job's
   city, the trail back to where they came from. Each is now
   `--mh-text-3`, which clears 4.5:1 on every surface in the sheet.
   They were invisible until `site.css` started being loaded by the
   audit; the fix is the token the palette always intended. */

/* ═══════════════════════ SHARED PIECES ═══════════════════════ */

/* The rings below are `outline`, not `box-shadow`.
   A zero-offset, zero-blur shadow with spread is an outline drawn the
   long way round: it reads as a ring, it is used as a ring, and calling
   it a shadow made it indistinguishable — to the audit and to the next
   reader — from the drop shadows the design system does not allow.
   `outline` follows `border-radius` in every browser this ships to. */

/* ── Verification marks ──────────────────────────────────────────
   Two of them, and they must never be mistaken for each other. A
   person gets a blue shield; a company gets an amber building. The
   difference is glyph *and* colour *and* shape, because colour alone
   fails for a colour-blind reader and shape alone is too small to
   read at 12px. */

.mh-vbadge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  border-radius: var(--mh-r-pill);
  vertical-align: middle;
  line-height: 0;
}
.mh-vbadge--sm { width: 18px; height: 18px; }
.mh-vbadge--lg { width: 24px; height: 24px; }

.mh-vbadge--individual {
  color: var(--mh-white);
  background: var(--mh-accent);
  outline: 2px solid var(--mh-bg);
}

/* A square, not a circle — the shape is the first thing read. */
.mh-vbadge--company {
  color: #1c1403;
  background: var(--mh-warn, #fbbf24);
  border-radius: var(--mh-r-sm);
  outline: 2px solid var(--mh-bg);
}

.mh-vchip {
  display: inline-flex;
  align-items: center;
  gap: var(--mh-1);
  padding: 3px var(--mh-2);
  border-radius: var(--mh-r-pill);
  font-size: var(--mh-t-2xs);
  font-weight: 500;
  white-space: nowrap;
}
.mh-vchip--individual {
  color: var(--mh-accent-text);
  background: var(--mh-accent-soft);
  border: 1px solid var(--mh-accent-line);
}
.mh-vchip--company {
  color: var(--mh-warn, #fbbf24);
  background: var(--mh-warn-bg, #241b08);
  border: 1px solid var(--mh-warn-line, rgba(251, 191, 36, 0.24));
}
.mh-vchip--pending {
  color: var(--mh-text-3);
  background: var(--mh-surface-sub);
  border: 1px solid var(--mh-border);
}
.mh-vchip--rejected {
  color: var(--mh-danger, #f87171);
  background: var(--mh-danger-bg, #26100f);
  border: 1px solid var(--mh-danger-line, rgba(248, 113, 113, 0.26));
}

/* ── Granted badges: medals (4.5) ─────────────────────────────────
   Editorial marks, and they must not be mistakable for verification.
   A granted badge is a medal: a shaped field with a rim and the mark
   inside. The shape follows the tone (gold seal, brand hexagon,
   success shield, warn pentagon, danger diamond, muted circle), so one
   badge is one silhouette everywhere. Flat fills, hairline rings — no
   gradient pretending to be metal. Always drawn after the verification
   mark, which keeps its own single filled circle. */

.mh-medal {
  --medal: var(--mh-text-3);
  --medal-field: var(--mh-surface-sub);
  position: relative;
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  line-height: 0;
  vertical-align: middle;
  color: var(--medal);
}
.mh-medal__shape { display: block; grid-area: 1 / 1; overflow: visible; }
.mh-medal__field { fill: var(--medal-field); stroke: var(--medal); stroke-width: 2.4; stroke-linejoin: round; }
.mh-medal__ring  { fill: none; stroke: var(--medal); stroke-width: 0.9; opacity: 0.45; }
.mh-medal__icon  { grid-area: 1 / 1; display: grid; place-items: center; color: var(--medal); }
.mh-medal__icon .mh-icon { display: block; }

.mh-medal--xs .mh-medal__field { stroke-width: 3.2; }
.mh-medal--xs .mh-medal__ring  { display: none; }
.mh-medal--sm .mh-medal__field { stroke-width: 2.8; }
.mh-medal--lg .mh-medal__field { stroke-width: 2; }

.mh-medal--brand   { --medal: var(--mh-accent-text); --medal-field: var(--mh-accent-soft); }
.mh-medal--gold    { --medal: var(--mh-gold-fg, #eeae54); --medal-field: var(--mh-gold-bg, #241b08); }
.mh-medal--success { --medal: var(--mh-success); --medal-field: var(--mh-success-bg); }
.mh-medal--warn    { --medal: var(--mh-warn); --medal-field: var(--mh-warn-bg); }
.mh-medal--danger  { --medal: var(--mh-danger); --medal-field: var(--mh-danger-bg); }
.mh-medal--muted   { --medal: var(--mh-text-3); --medal-field: var(--mh-surface-mute); }

/* "+2" — the rest are on the profile. */
.mh-medal--more {
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border: 1px solid var(--mh-border-strong);
  border-radius: var(--mh-r-pill);
  color: var(--mh-text-3);
  font-size: var(--mh-t-2xs);
  font-weight: 700;
  line-height: 20px;
  font-variant-numeric: tabular-nums;
}

/* Beside a name: a tight row that never wraps the name. */
.mh-medals-inline { display: inline-flex; align-items: center; gap: 3px; vertical-align: middle; }

/* With their words, under a name. */
.mh-medal-chips { display: flex; flex-wrap: wrap; gap: var(--mh-2); margin-top: var(--mh-3); }
.mh-medal-chip {
  --chip: var(--mh-text-3);
  display: inline-flex;
  align-items: center;
  gap: var(--mh-2);
  min-height: 30px;
  padding: 3px var(--mh-3) 3px 4px;
  padding-inline: 4px var(--mh-3);
  border: 1px solid color-mix(in srgb, var(--chip) 34%, transparent);
  border-radius: var(--mh-r-pill);
  background: color-mix(in srgb, var(--chip) 7%, transparent);
  color: var(--mh-text);
  font-size: var(--mh-t-xs);
  font-weight: 500;
  white-space: nowrap;
}
.mh-medal-chip--brand   { --chip: var(--mh-accent-text); }
.mh-medal-chip--gold    { --chip: var(--mh-gold-fg, #eeae54); }
.mh-medal-chip--success { --chip: var(--mh-success); }
.mh-medal-chip--warn    { --chip: var(--mh-warn); }
.mh-medal-chip--danger  { --chip: var(--mh-danger); }
.mh-medal-chip--muted   { --chip: var(--mh-text-3); }

/* The medal grid: "my badges". */
.mh-medals { min-width: 0; }
.mh-medals__head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--mh-4);
  margin-bottom: var(--mh-5);
  text-align: center;
}
.mh-medals__laurel { display: inline-flex; color: var(--mh-gold-fg, #eeae54); opacity: 0.7; }
.mh-medals__title h2 {
  display: inline-flex;
  align-items: baseline;
  gap: var(--mh-2);
  margin: 0;
  font-size: var(--mh-t-h2);
  font-weight: var(--mh-w-semi);
  color: var(--mh-text);
}
.mh-medals__count {
  font-size: var(--mh-t-display);
  font-weight: var(--mh-w-bold);
  line-height: 1;
  color: var(--mh-gold-fg, #eeae54);
  font-variant-numeric: tabular-nums;
}
.mh-medals__title p { margin: var(--mh-1) 0 0; font-size: var(--mh-t-xs); color: var(--mh-text-3); }

.mh-medals__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--mh-3);
  margin: 0;
  padding: 0;
  list-style: none;
}
.mh-medal-card {
  --chip: var(--mh-text-3);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--mh-3);
  min-width: 0;
  padding: var(--mh-5) var(--mh-3) var(--mh-4);
  border: 1px solid var(--mh-border);
  border-radius: var(--mh-r-lg);
  background:
    radial-gradient(70% 45% at 50% 0%, color-mix(in srgb, var(--chip) 9%, transparent) 0%, transparent 100%),
    var(--mh-surface);
  text-align: center;
  transition: border-color var(--mh-t-fast), transform var(--mh-t-fast);
}
.mh-medal-card:hover { border-color: color-mix(in srgb, var(--chip) 40%, var(--mh-border)); transform: translateY(-1px); }
.mh-medal-card--brand   { --chip: var(--mh-accent-text); }
.mh-medal-card--gold    { --chip: var(--mh-gold-fg, #eeae54); }
.mh-medal-card--success { --chip: var(--mh-success); }
.mh-medal-card--warn    { --chip: var(--mh-warn); }
.mh-medal-card--danger  { --chip: var(--mh-danger); }
.mh-medal-card__body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.mh-medal-card__name { font-size: var(--mh-t-sm); font-weight: 500; color: var(--mh-text); line-height: var(--mh-lh-tight); }
.mh-medal-card__desc { font-size: var(--mh-t-2xs); color: var(--mh-text-3); line-height: var(--mh-lh-snug); }
.mh-medal-card__date { margin-top: var(--mh-1); font-size: var(--mh-t-2xs); color: var(--mh-text-4); }

/* In a page's side column: two across, no header of its own. */
.mh-medals--side .mh-medals__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--mh-2); }
.mh-medals--side .mh-medal-card { padding: var(--mh-4) var(--mh-2) var(--mh-3); }
.mh-medals--side .mh-medal-card__desc { display: none; }

/* Compact: the dashboard card — a row of small medals with names. */
.mh-medals--compact .mh-medals__head { margin-bottom: var(--mh-4); }
.mh-medals--compact .mh-medals__grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--mh-2); }
.mh-medals--compact .mh-medal-card { flex-direction: row; text-align: start; padding: var(--mh-3); gap: var(--mh-3); background: var(--mh-surface); }
.mh-medals--compact .mh-medal-card:hover { transform: none; }
.mh-medals--compact .mh-medal-card__date { display: none; }

.mh-medals__link {
  display: inline-flex;
  align-items: center;
  gap: var(--mh-1);
  margin-top: var(--mh-4);
  font-size: var(--mh-t-xs);
  font-weight: 500;
  color: var(--mh-accent-text);
  text-decoration: none;
}
.mh-medals__link:hover { text-decoration: underline; }

@media (max-width: 720px) {
  .mh-medals__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mh-medals__head { grid-template-columns: minmax(0, 1fr); }
  .mh-medals__laurel { display: none; }
}
@media (max-width: 420px) {
  .mh-medals__grid { gap: var(--mh-2); }
  .mh-medal-card { padding: var(--mh-4) var(--mh-2) var(--mh-3); }
}
@media (prefers-reduced-motion: reduce) { .mh-medal-card { transition: none; } }

/* ── A company, wherever it appears ──────────────────────────────
   `Parts::companyIdentity()`. One block on the job card, the job
   detail sidebar, the company page and the followers list, so a
   company looks the same everywhere it is named. */

.mh-corg { display: flex; align-items: center; gap: var(--mh-3); min-width: 0; }
.mh-corg--compact { gap: var(--mh-2); }
/* 4.14.1 — the logo is a link to the same page as the name; the anchor
   wraps the avatar without changing its box. */
.mh-corg__logo { display: inline-flex; flex: none; line-height: 0; color: inherit; text-decoration: none; border-radius: inherit; }

.mh-corg__text { min-width: 0; }
.mh-corg__name {
  display: flex;
  align-items: center;
  gap: var(--mh-2);
  min-width: 0;
  font-size: var(--mh-t-sm);
  font-weight: 500;
  line-height: var(--mh-lh-snug);
}
.mh-corg--compact .mh-corg__name { font-size: var(--mh-t-2xs); color: var(--mh-text-2); }
.mh-corg__name a { color: inherit; text-decoration: none; }
.mh-corg__name a:hover { color: var(--mh-accent-text); }
.mh-corg__name > span:first-child,
.mh-corg__name > a:first-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mh-corg__meta {
  margin-top: 1px;
  font-size: var(--mh-t-2xs);
  color: var(--mh-text-3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mh-corg--compact .mh-corg__meta { display: none; }

/* Inside a job card the whole card is the link, so the company name
   must not look like a second one. */
.mh-job .mh-corg__name { font-weight: 500; }

/* ── Followers ───────────────────────────────────────────────────
   The count is public and says nothing about any individual; the
   list is not here at all — it is rendered only inside the company's
   own dashboard, by a query that refuses anyone else. */

.mh-followers {
  display: inline-flex;
  align-items: center;
  font-size: var(--mh-t-2xs);
  font-weight: 500;
  color: var(--mh-text-3);
  white-space: nowrap;
}

.mh-btn.is-following .mh-icon { color: var(--mh-success); }

/* ── Account kind ────────────────────────────────────────────────
   Shown whether or not an account is verified, because the badge only
   appears when it is — and telling a person from a company must not
   depend on verification. */

.mh-kind {
  display: inline-flex;
  align-items: center;
  gap: var(--mh-1);
  padding: 3px var(--mh-2);
  border-radius: var(--mh-r-sm);
  border: 1px solid var(--mh-border);
  background: var(--mh-surface-sub);
  font-size: var(--mh-t-2xs);
  font-weight: 500;
  color: var(--mh-text-2);
  white-space: nowrap;
}
.mh-kind--company { border-color: var(--mh-warn-line, rgba(251,191,36,.24)); }
.mh-kind--company .mh-icon { color: var(--mh-warn, #fbbf24); }
.mh-kind--individual .mh-icon { color: var(--mh-accent-text); }

/* ── Avatar ──────────────────────────────────────────────────────
   A circle for a person, a rounded square for a company: the same
   distinction the badge makes, carried by the picture itself. */

.mh-avatar {
  --mh-avatar-size: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: var(--mh-avatar-size);
  height: var(--mh-avatar-size);
  border-radius: var(--mh-r-pill);
  overflow: hidden;
  background: var(--mh-surface-hard);
  color: var(--mh-text-2);
  font-weight: 700;
  font-size: calc(var(--mh-avatar-size) * 0.4);
  line-height: 1;
  user-select: none;
}
.mh-avatar--company { border-radius: calc(var(--mh-avatar-size) * 0.22); }
.mh-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ── Identity block ──────────────────────────────────────────────
   Face, name, badge, one line. The unit that says who wrote this. */

.mh-identity { display: flex; align-items: center; gap: var(--mh-3); min-width: 0; }
.mh-identity__face { flex: 0 0 auto; line-height: 0; }
.mh-identity__text { min-width: 0; }
.mh-identity__name {
  display: flex;
  align-items: center;
  gap: var(--mh-2);
  min-width: 0;
  font-weight: 700;
  font-size: var(--mh-t-body);
}
.mh-identity__name a { color: var(--mh-text); text-decoration: none; }
.mh-identity__name a:hover { color: var(--mh-accent-text); }
.mh-identity__line {
  margin-top: 2px;
  font-size: var(--mh-t-xs);
  color: var(--mh-text-3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── Rating ──────────────────────────────────────────────────────
   Stars are decoration; the number is the fact. Both are shown, and
   the number is what a screen reader gets. */

.mh-rating {
  display: inline-flex;
  align-items: center;
  gap: var(--mh-2);
  font-size: var(--mh-t-xs);
  color: var(--mh-text-2);
}
.mh-rating--empty { color: var(--mh-text-4); }
.mh-rating__stars { display: inline-flex; gap: 1px; line-height: 0; }
.mh-star { line-height: 0; color: var(--mh-surface-hard); }
.mh-star--full { color: var(--mh-warn, #fbbf24); }
.mh-star--half { color: var(--mh-warn, #fbbf24); opacity: 0.55; }
.mh-rating__value { font-weight: 700; color: var(--mh-text); }
.mh-rating__count { color: var(--mh-text-4); }

/* ── Chips ───────────────────────────────────────────────────────*/

.mh-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mh-2);
  margin: 0;
  padding: 0;
  list-style: none;
}
.mh-chip {
  padding: 4px var(--mh-3);
  border-radius: var(--mh-r-pill);
  border: 1px solid var(--mh-border);
  background: var(--mh-surface-sub);
  font-size: var(--mh-t-xs);
  color: var(--mh-text-2);
}
.mh-chip--accent {
  border-color: var(--mh-accent-line);
  background: var(--mh-accent-soft);
  color: var(--mh-accent-text);
}
.mh-chips--top { margin-top: var(--mh-3); }

.mh-meta {
  display: inline-flex;
  align-items: center;
  gap: var(--mh-1);
  font-size: var(--mh-t-xs);
  color: var(--mh-text-3);
}
.mh-meta .mh-icon { color: var(--mh-text-4); }

/* ── Section ─────────────────────────────────────────────────────*/

.mh-psection {
  margin-bottom: var(--mh-6);
  border: 1px solid var(--mh-border);
  border-radius: var(--mh-r-lg);
  background: var(--mh-surface);
  overflow: hidden;
}
.mh-psection__head {
  display: flex;
  align-items: center;
  gap: var(--mh-2);
  margin: 0;
  padding: var(--mh-5) var(--mh-6);
  border-bottom: 1px solid var(--mh-border);
  font-size: var(--mh-t-h2);
  font-weight: 700;
}
.mh-psection__head .mh-icon { color: var(--mh-text-4); }

/* 24px, not 20. A border drawn tight around its contents reads as a
   box somebody ran out of room in; the same border with a hand's width
   of air inside reads as a panel. This is the single change that makes
   the page look composed rather than crowded, and it costs nothing but
   scroll. */
.mh-psection__body { padding: var(--mh-6); }

.mh-prose { color: var(--mh-text-2); line-height: 1.85; font-size: var(--mh-t-body); }
.mh-prose p { margin: 0 0 var(--mh-3); }
.mh-prose p:last-child { margin-bottom: 0; }
.mh-prose ul, .mh-prose ol { margin: 0 0 var(--mh-3); padding-inline-start: var(--mh-5); }

.mh-empty--soft { padding: var(--mh-6) var(--mh-4); text-align: center; color: var(--mh-text-3); }
.mh-empty--soft p { margin: var(--mh-2) 0 0; font-size: var(--mh-t-sm); }

/* ═══════════════════════ SERVICE PAGES ═══════════════════════ */

.mh-phero { padding: var(--mh-8) 0 var(--mh-6); }
.mh-phero h1 { margin: 0 0 var(--mh-2); font-size: var(--mh-t-display); }
.mh-phero p { margin: 0; max-width: 62ch; color: var(--mh-text-2); font-size: var(--mh-t-body); }

.mh-cattabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mh-2);
  margin-bottom: var(--mh-6);
}
.mh-cattab {
  padding: 6px var(--mh-4);
  border-radius: var(--mh-r-pill);
  border: 1px solid var(--mh-border);
  background: var(--mh-surface);
  font-size: var(--mh-t-xs);
  color: var(--mh-text-2);
  text-decoration: none;
  transition: border-color var(--mh-t-fast), color var(--mh-t-fast);
}
.mh-cattab:hover { border-color: var(--mh-border-hard); color: var(--mh-text); }
.mh-cattab.is-active {
  border-color: var(--mh-accent-line);
  background: var(--mh-accent-soft);
  color: var(--mh-accent-text);
}

/* Cards size themselves: as many 260px columns as fit, no media query
   and no breakpoint list to keep in step with anything. */
.mh-scards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr));
  gap: var(--mh-4);
}

/* A column count somebody asked for.
   Present only when `[mihhar_products]` was given one — without it the
   fluid rule above still applies, so the two can never disagree. Three
   custom properties rather than a class per count, so any combination
   of desktop, tablet and phone is one selector and nothing per-instance
   is printed into the page.
   `minmax(0, 1fr)` on every track: a grid item's default minimum is its
   own content, and one long unbroken word in a card title would
   otherwise push the column — and the page — wider than the screen. */
.mh-scards--fixed { grid-template-columns: repeat(var(--mh-cols-m, 1), minmax(0, 1fr)); }

@media (min-width: 640px) {
  .mh-scards--fixed { grid-template-columns: repeat(var(--mh-cols-t, 2), minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
  .mh-scards--fixed { grid-template-columns: repeat(var(--mh-cols-d, 3), minmax(0, 1fr)); }
}

/* The shortcode's wrapper carries no styling of its own. It exists so a
   page builder has something to target, and so the grid is never a
   direct child of a column whose own rules might reach into it. */
.mh-products { min-width: 0; }

.mh-scard {
  display: flex;
  flex-direction: column;
  min-width: 0;
  border: 1px solid var(--mh-border);
  border-radius: var(--mh-r-lg);
  background: var(--mh-surface);
  overflow: hidden;
  transition: border-color var(--mh-t-fast), transform var(--mh-t-fast);
}
.mh-scard:hover { border-color: var(--mh-border-hard); transform: translateY(-2px); }

.mh-scard__media {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 16 / 9;
  background: var(--mh-surface-sub);
  border-bottom: 2px solid var(--mh-scard-accent, var(--mh-accent));
  color: var(--mh-white);
  overflow: hidden;
}
.mh-scard__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mh-scard__glyph { opacity: 0.9; }

.mh-scard__body {
  display: flex;
  flex-direction: column;
  gap: var(--mh-2);
  flex: 1 1 auto;
  padding: var(--mh-4);
  min-width: 0;
}
.mh-scard__cat {
  font-size: var(--mh-t-2xs);
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--mh-accent-text);
}
.mh-scard__title { margin: 0; font-size: var(--mh-t-h3); }
.mh-scard__title a { color: var(--mh-text); text-decoration: none; }
.mh-scard__title a:hover { color: var(--mh-accent-text); }
.mh-scard__summary {
  margin: 0;
  font-size: var(--mh-t-xs);
  line-height: 1.7;
  color: var(--mh-text-3);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.mh-scard__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--mh-2);
  margin-top: auto;
  padding-top: var(--mh-3);
  border-top: 1px solid var(--mh-border);
}
.mh-scard__price { font-weight: 700; color: var(--mh-text); }
.mh-scard__delivery {
  display: inline-flex;
  align-items: center;
  gap: var(--mh-1);
  font-size: var(--mh-t-2xs);
  color: var(--mh-text-3);
}

/* ── One service ─────────────────────────────────────────────────*/

.mh-crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--mh-2);
  padding: var(--mh-5) 0 var(--mh-4);
  font-size: var(--mh-t-xs);
  color: var(--mh-text-3);
}
.mh-crumbs a { color: var(--mh-text-3); text-decoration: none; }
.mh-crumbs a:hover { color: var(--mh-accent-text); }

/* The buy box is a column beside the content on a wide screen and the
   first thing after the header on a narrow one — because on a phone the
   price should not be at the bottom of two thousand words. */
.mh-spage__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--mh-6);
  align-items: start;
  padding-bottom: var(--mh-12);
}
@media (min-width: 940px) {
  .mh-spage__grid { grid-template-columns: minmax(0, 1fr) 340px; }
  .mh-spage__buy { position: sticky; top: var(--mh-5); }
}

.mh-shero {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--mh-5);
  margin-bottom: var(--mh-5);
}
@media (min-width: 720px) {
  .mh-shero { grid-template-columns: 260px minmax(0, 1fr); }
}
.mh-shero__media {
  aspect-ratio: 4 / 3;
  border-radius: var(--mh-r-lg);
  overflow: hidden;
  background: var(--mh-surface-sub);
  display: flex;
  align-items: center;
  justify-content: center;
}
.mh-shero__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mh-shero__media--glyph {
  background: var(--mh-surface-sub);
  border-bottom: 2px solid var(--mh-scard-accent, var(--mh-accent));
  color: var(--mh-white);
}
.mh-shero__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--mh-3);
  margin-bottom: var(--mh-3);
}
.mh-shero__text h1 { margin: 0 0 var(--mh-3); font-size: var(--mh-t-display); line-height: 1.25; }
.mh-shero__lede { margin: 0 0 var(--mh-4); color: var(--mh-text-2); line-height: 1.8; }

/* 4.17.3 — price and action under the title on a phone. */
.mh-shero__buy {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--mh-3);
  margin-top: var(--mh-4);
}
.mh-shero__price { font-weight: 700; font-size: var(--mh-t-title); }
@media (min-width: 940px) {
  .mh-shero__buy { display: none; }
}

/* 4.17.3 — the service's own questions. */
.mh-sfaq { display: grid; gap: var(--mh-2); }
.mh-sfaq__item {
  border: 1px solid var(--mh-border, rgba(127, 127, 127, .25));
  border-radius: var(--mh-r-lg);
  padding: var(--mh-3) var(--mh-4);
  background: var(--mh-surface, transparent);
}
.mh-sfaq__item summary { cursor: pointer; font-weight: 600; line-height: 1.7; }
.mh-sfaq__item p { margin: var(--mh-2) 0 0; color: var(--mh-text-2); line-height: 1.8; }
.mh-prose h3 { margin: var(--mh-5) 0 var(--mh-2); font-size: var(--mh-t-title); color: var(--mh-text); }

.mh-sfacts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mh-2) var(--mh-5);
  margin: 0;
  padding: 0;
  list-style: none;
}
.mh-sfacts li {
  display: inline-flex;
  align-items: center;
  gap: var(--mh-2);
  font-size: var(--mh-t-xs);
  color: var(--mh-text-2);
}
.mh-sfacts .mh-icon { color: var(--mh-text-4); }

.mh-needs { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--mh-2); }
.mh-needs li { display: flex; align-items: center; gap: var(--mh-2); font-size: var(--mh-t-sm); color: var(--mh-text-2); }
.mh-needs .mh-icon { color: var(--mh-success, #4ade80); }

/* ── Packages ────────────────────────────────────────────────────*/

.mh-packages {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  gap: var(--mh-4);
}
.mh-package {
  display: flex;
  flex-direction: column;
  gap: var(--mh-3);
  padding: var(--mh-4);
  border: 1px solid var(--mh-border);
  border-radius: var(--mh-r-lg);
  background: var(--mh-surface-sub);
  min-width: 0;
}
.mh-package.is-featured { border-color: var(--mh-accent-line); background: var(--mh-accent-soft); }
.mh-package__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--mh-2); }
.mh-package__head h3 { margin: 0; font-size: var(--mh-t-h3); }
.mh-package__price { font-weight: 700; white-space: nowrap; }
.mh-package__summary { margin: 0; font-size: var(--mh-t-xs); color: var(--mh-text-3); line-height: 1.7; }
.mh-package__features { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--mh-1); }
.mh-package__features li { display: flex; gap: var(--mh-2); font-size: var(--mh-t-xs); color: var(--mh-text-2); }
.mh-package__features .mh-icon { color: var(--mh-success, #4ade80); flex: 0 0 auto; margin-top: 3px; }
.mh-package__delivery { display: flex; align-items: center; gap: var(--mh-1); margin: 0; font-size: var(--mh-t-2xs); color: var(--mh-text-4); }
.mh-package__cta { margin-top: auto; justify-content: center; }

/* ── Reviews ─────────────────────────────────────────────────────*/

.mh-reviews { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--mh-4); }
.mh-review { padding-bottom: var(--mh-4); border-bottom: 1px solid var(--mh-border); }
.mh-review:last-child { padding-bottom: 0; border-bottom: 0; }
.mh-review__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--mh-3);
  margin-bottom: var(--mh-2);
  font-size: var(--mh-t-xs);
}
.mh-review__head time { color: var(--mh-text-4); }
.mh-review p { margin: 0; color: var(--mh-text-2); line-height: 1.8; font-size: var(--mh-t-sm); }

/* ── Buy box ─────────────────────────────────────────────────────
   The most important component on the site. Everything in it is one
   of: what it costs, how to start, and why that is safe. */

.mh-buybox {
  display: grid;
  gap: var(--mh-4);
  padding: var(--mh-5);
  border: 1px solid var(--mh-border-strong);
  border-radius: var(--mh-r-lg);
  background: var(--mh-surface);
}
.mh-buybox__price { display: grid; gap: 2px; }
.mh-buybox__amount { font-size: var(--mh-t-value); font-weight: 800; letter-spacing: -0.01em; }
.mh-buybox__note { font-size: var(--mh-t-2xs); color: var(--mh-text-4); }
.mh-buybox__cta { width: 100%; justify-content: center; }
.mh-buybox__hint { margin: calc(var(--mh-3) * -1) 0 0; font-size: var(--mh-t-xs); color: var(--mh-text-3); text-align: center; }
.mh-buybox__facts { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--mh-2); }
.mh-buybox__facts li { display: flex; gap: var(--mh-2); font-size: var(--mh-t-xs); color: var(--mh-text-2); }
.mh-buybox__facts .mh-icon { color: var(--mh-text-4); flex: 0 0 auto; margin-top: 2px; }
.mh-buybox__share { border-top: 1px solid var(--mh-border); padding-top: var(--mh-4); }
.mh-buybox__fx { margin: 0; font-size: var(--mh-t-2xs); color: var(--mh-text-4); }

/* ═══════════════════════ PROFILE PAGES ═══════════════════════ */

.mh-cover {
  position: relative;

  /* Height stated directly — no `aspect-ratio`, no `min-height`. The
     two together were the whole trouble: a box with `aspect-ratio` and
     a clamping `min-height` has a *min-content width* of
     height x ratio, so this one refused to shrink below 336px however
     narrow the screen. Two symptoms, one cause:

       - at 320px the cover came out 336px, hanging 33px outside its own
         header and cropping the image off-centre. The header's
         `overflow: hidden` hid that, which is how it survived four
         releases;

       - embedded in a page-builder column, where the wrapper is a flex
         item with the default `min-width: auto`, that same 336px floor
         propagated all the way up and pushed the whole document
         sideways at 360 and 390.

     A height that is purely a function of the viewport contributes
     nothing to min-content width, so the box shrinks with the screen —
     and the image inside still fills whatever box it gets, because it
     is `object-fit: cover`. */
  width: 100%;
  /* 260px of empty banner above a name is space spent on nothing. The
     cover is context, not content: enough to place a photograph, not
     enough to push the name below the fold on a laptop. */
  height: clamp(104px, 17vw, 200px);
  border-radius: var(--mh-r-lg) var(--mh-r-lg) 0 0;
  overflow: hidden;
  background: var(--mh-surface-sub);
}
.mh-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ── Pictures that are not offered for taking ──────────────────────

   Profile photographs, covers and badge marks. Applied to the image
   itself, with `draggable="false"` in the markup and a `contextmenu`
   handler in `site.js` — three gestures, closed:

     · dragging the picture out of the page onto a desktop
     · right-click → "Save image as…"
     · long-press → the iOS save/share sheet (`-webkit-touch-callout`)

   ── What this does not do, said plainly ──────────────────────────

   It does not stop a screenshot, and it does not stop anybody who
   opens developer tools, reads the page source, or requests the image
   URL directly. Nothing in a browser can, and a product that claimed
   otherwise would be lying to the person who uploaded the photograph.

   A public profile picture is on a public page: its address is public
   by definition, and that is the feature. What is closed here is the
   set of *casual* gestures — the ones a visitor performs without
   deciding to — and the honest description of the rest is that the
   platform's real protection for anything sensitive is not to publish
   it at all. Identity documents work that way: they live outside the
   web root, have no URL, and are served only through a request that
   has answered who is asking. See `Support\PrivateVault`. */
.mh-nograb {
  -webkit-user-drag: none;
  -webkit-touch-callout: none;
  user-select: none;
  -webkit-user-select: none;
}
.mh-cover--blank {
  /* One flat tone, derived from the account id so a profile with no
     cover still looks like itself. It used to be a radial gradient over
     a linear one — two paint layers and a colour that shifted across
     the widest box on the page, for a surface that is meant to sit
     behind a name and be forgotten.

     The saturation is deliberately low. At 22% the hue was legible as a
     colour, and an id that landed on 90° gave somebody an olive-green
     banner across the top of their professional profile. At 10% it
     reads as a dark neutral that happens not to be identical to the
     next one, which is all it was ever for. */
  background: hsl(var(--mh-cover-hue, 220) 16% 15%);
}

.mh-phead {
  margin-bottom: var(--mh-6);
  border: 1px solid var(--mh-border);
  border-radius: var(--mh-r-lg);
  background: var(--mh-surface);
  overflow: hidden;

  /* The photo, and how far it climbs onto the cover. Declared on the
     header so the face and the avatar inside it are sized from one
     number instead of two that have to be kept in step. */
  --mh-hero-avatar: clamp(88px, 21vw, 132px);
  --mh-hero-lift: calc(var(--mh-hero-avatar) * 0.46);
}
.mh-phead__bar {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--mh-5);

  /* Top padding, which this bar never had: the name used to begin the
     moment the cover ended. The photo climbs back over it — see the
     lift below, which is measured from this padded edge and adds it
     back — so the picture still overlaps the cover while everything
     written beside it gets a hand's width of air first. */
  padding: var(--mh-5) var(--mh-6) var(--mh-6);
}
@media (min-width: 820px) {
  .mh-phead__bar {
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: end;
    column-gap: var(--mh-7);
  }

  /* The photo hangs from the top of the row rather than sitting on its
     baseline, which is what lets the negative margin lift it onto the
     cover. Bottom-aligned — as it used to be — a negative top margin
     does nothing at all: the box keeps its bottom edge on the row's,
     and on a desktop the picture sat politely *below* the cover while
     on a phone it climbed onto it. One photo, two behaviours, and the
     desktop one was the wrong one. */
  .mh-phead__face { align-self: start; }
}

/* On the cover, not under it.
   `z-index` is not decoration here: the cover and the photo are
   siblings with no stacking of their own, so which one wins is decided
   by document order and by whatever a future edit happens to add. It is
   stated instead. */
.mh-phead__face {
  position: relative;
  z-index: 1;
  /* The bar's own top padding is added back, so the overlap is exactly
     `--mh-hero-lift` of cover no matter what that padding becomes. */
  margin-top: calc((var(--mh-hero-lift) + var(--mh-5)) * -1);
}

/* A wider ring than the old 4px. The photo now overlaps a surface it
   has to be separated from, and a hairline ring against a dark cover
   reads as a smudge rather than as an edge. */
.mh-phead__face .mh-avatar {
  outline: 5px solid var(--mh-surface);
  outline-offset: 0;
}

/* The one photo a profile page is built around. Sized from the header's
   own variable so it shrinks with the screen — 88px on a small phone,
   132px on a desktop, every step in between without a breakpoint. */
.mh-avatar--hero { --mh-avatar-size: var(--mh-hero-avatar, clamp(88px, 21vw, 132px)); }
.mh-phead__face--square .mh-avatar { border-radius: var(--mh-r-lg); }
.mh-phead__text { min-width: 0; padding-bottom: 2px; }
.mh-phead__name { display: flex; align-items: center; gap: var(--mh-3); flex-wrap: wrap; }
.mh-phead__name h1 { margin: 0; font-size: var(--mh-t-title); line-height: 1.3; }
.mh-phead__headline { margin: var(--mh-3) 0 0; color: var(--mh-text-2); font-size: var(--mh-t-body); }
.mh-phead__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--mh-2) var(--mh-4);
  margin-top: var(--mh-4);
}
.mh-phead__actions { display: flex; flex-wrap: wrap; gap: var(--mh-2); align-items: center; }

/* A company page carries an amber rule under its cover — the same
   signal as its badge, at page scale, so the kind of account registers
   before anything is read. */
.mh-phead--company .mh-cover { border-bottom: 3px solid var(--mh-warn, #fbbf24); }
.mh-ppage--individual .mh-cover { border-bottom: 3px solid var(--mh-accent); }

.mh-ppage__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--mh-5);
  align-items: start;
  padding-bottom: var(--mh-12);
}
@media (min-width: 940px) {
  .mh-ppage__grid { grid-template-columns: minmax(0, 1fr) 320px; }
}

.mh-pfacts { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--mh-3); }
.mh-pfacts li { display: flex; align-items: baseline; justify-content: space-between; gap: var(--mh-3); font-size: var(--mh-t-sm); }
.mh-pfacts span { color: var(--mh-text-3); }
.mh-pfacts strong { color: var(--mh-text); font-weight: 500; }

.mh-plinks { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--mh-2); }
.mh-plinks a { display: inline-flex; align-items: center; gap: var(--mh-2); font-size: var(--mh-t-sm); color: var(--mh-accent-text); text-decoration: none; }
.mh-plinks a:hover { text-decoration: underline; }

.mh-cjobs { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--mh-2); }
.mh-cjobs a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--mh-3);
  padding: var(--mh-3);
  border: 1px solid var(--mh-border);
  border-radius: var(--mh-r);
  background: var(--mh-surface-sub);
  color: var(--mh-text);
  text-decoration: none;
}
.mh-cjobs a:hover { border-color: var(--mh-border-hard); }
.mh-cjobs span { font-size: var(--mh-t-xs); color: var(--mh-text-3); }

/* ── Timeline ────────────────────────────────────────────────────*/

.mh-timeline {
  position: relative;
  margin: 0;
  padding: 0 var(--mh-5) 0 0;
  list-style: none;
  display: grid;
  gap: var(--mh-5);
}
.mh-timeline__item { position: relative; padding-inline-start: var(--mh-6); }
.mh-timeline__item::before {
  content: "";
  position: absolute;
  inset-inline-start: 5px;
  top: 16px;
  bottom: calc(var(--mh-5) * -1);
  width: 1px;
  background: var(--mh-border);
}
.mh-timeline__item:last-child::before { display: none; }
.mh-timeline__marker {
  position: absolute;
  inset-inline-start: 0;
  top: 6px;
  width: 11px;
  height: 11px;
  border-radius: var(--mh-r-pill);
  background: var(--mh-accent);
  outline: 3px solid var(--mh-surface);
}
.mh-timeline__body h3 { margin: 0 0 var(--mh-1); font-size: var(--mh-t-h3); }
.mh-timeline__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mh-1) var(--mh-3);
  margin: 0 0 var(--mh-2);
  font-size: var(--mh-t-xs);
  color: var(--mh-text-3);
}
.mh-timeline__range { color: var(--mh-text-3); }
.mh-timeline__text { margin: 0; font-size: var(--mh-t-sm); color: var(--mh-text-2); line-height: 1.8; }

/* ── The owner's band ────────────────────────────────────────────
   Shown only to the account that owns the page, above everything
   else, so the owner is never guessing whether they are looking at
   the editor or at what the world sees. */

.mh-ownbar {
  display: flex;
  align-items: center;
  gap: var(--mh-3);
  flex-wrap: wrap;
  margin-bottom: var(--mh-4);
  padding: var(--mh-3) var(--mh-4);
  border: 1px solid var(--mh-accent);
  border-radius: var(--mh-r);
  background: var(--mh-surface-sub);
  font-size: var(--mh-t-sm);
}
.mh-ownbar--hidden { border-color: var(--mh-warn, #d97706); }
.mh-ownbar__icon { display: inline-flex; flex: 0 0 auto; color: var(--mh-accent-text); }
.mh-ownbar--hidden .mh-ownbar__icon { color: var(--mh-warn, #d97706); }
.mh-ownbar__text { margin: 0; flex: 1 1 240px; min-width: 0; }
.mh-ownbar__text strong { display: block; }
.mh-ownbar__text span { color: var(--mh-text-3); font-size: var(--mh-t-xs); }
.mh-ownbar .mh-btn { flex: 0 0 auto; }

/* ── A section that could not load ───────────────────────────────
   Its own line, in its own place, while the rest of the page stands. */

.mh-sfail {
  display: flex;
  align-items: flex-start;
  gap: var(--mh-3);
  padding: var(--mh-4);
  border: 1px dashed var(--mh-border-hard, var(--mh-border));
  border-radius: var(--mh-r);
  background: var(--mh-surface-sub);
  color: var(--mh-text-2);
  font-size: var(--mh-t-sm);
}
.mh-sfail > .mh-icon { flex: 0 0 auto; margin-top: 2px; color: var(--mh-warn, #d97706); }
.mh-sfail p { margin: 0; }
.mh-sfail__ref { margin-top: var(--mh-1); font-size: var(--mh-t-2xs); color: var(--mh-text-4); }

/* ── Share ───────────────────────────────────────────────────────
   A `<details>`, so it opens and closes with no script at all, and
   every destination inside it is a real link. */

.mh-sharesheet { position: relative; }
.mh-sharesheet > summary { list-style: none; cursor: pointer; }
.mh-sharesheet > summary::-webkit-details-marker { display: none; }

/* Said explicitly rather than left to the browser.
   A closed `<details>` hides its content by putting the content slot in
   `content-visibility: hidden` — but this panel is `position: absolute`
   against `.mh-sharesheet` itself, and it escapes that: measured in
   Chromium, a closed sheet was 288×282 and painted, sitting on top of
   the page at every width. The panel is hidden by a rule of its own so
   it does not depend on a UA detail to disappear. */
.mh-sharesheet:not([open]) .mh-sharesheet__panel { display: none; }

.mh-sharesheet__panel {
  position: absolute;
  inset-inline-end: 0;
  top: calc(100% + var(--mh-2));
  z-index: 30;
  width: min(320px, calc(100vw - var(--mh-8)));
  padding: var(--mh-4);
  border: 1px solid var(--mh-border);
  border-radius: var(--mh-r-lg);
  background: var(--mh-surface);
  border-width: 2px;
}
.mh-sharesheet__title { margin: 0 0 var(--mh-3); font-size: var(--mh-t-sm); font-weight: 500; }
.mh-sharesheet__link { display: flex; gap: var(--mh-2); margin-bottom: var(--mh-3); }
.mh-sharesheet__link input {
  flex: 1 1 auto;
  min-width: 0;
  padding: var(--mh-2) var(--mh-3);
  border: 1px solid var(--mh-border);
  border-radius: var(--mh-r);
  background: var(--mh-surface-sub);
  color: var(--mh-text-2);
  font-size: var(--mh-t-xs);
  direction: ltr;
  text-align: left;
}
.mh-sharesheet__to { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--mh-1); }
.mh-sharesheet__net {
  display: flex;
  align-items: center;
  gap: var(--mh-3);
  width: 100%;
  padding: var(--mh-2) var(--mh-3);
  border: 0;
  border-radius: var(--mh-r);
  background: transparent;
  color: var(--mh-text);
  font: inherit;
  font-size: var(--mh-t-sm);
  text-align: start;
  text-decoration: none;
  cursor: pointer;
}
.mh-sharesheet__net:hover,
.mh-sharesheet__net:focus-visible { background: var(--mh-surface-sub); }
.mh-sharesheet__net--whatsapp .mh-icon { color: #1c9d4d; }
.mh-sharesheet__net--linkedin .mh-icon { color: #0a66c2; }
.mh-sharesheet__net--facebook .mh-icon { color: #1877f2; }

/* ── A company's services and posts ──────────────────────────────*/

.mh-cservices { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--mh-2); }
.mh-cservices a {
  display: flex;
  align-items: flex-start;
  gap: var(--mh-3);
  padding: var(--mh-3);
  border: 1px solid var(--mh-border);
  border-radius: var(--mh-r);
  background: var(--mh-surface-sub);
  color: var(--mh-text);
  text-decoration: none;
}
.mh-cservices a:hover { border-color: var(--mh-border-hard); }
.mh-cservices__icon { flex: 0 0 auto; color: var(--mh-accent-text); margin-top: 2px; }
.mh-cservices__text { display: grid; gap: 2px; min-width: 0; }
.mh-cservices__text span { font-size: var(--mh-t-xs); color: var(--mh-text-3); }

.mh-cposts { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--mh-3); }
.mh-cposts li {
  padding: var(--mh-3);
  border-inline-start: 3px solid var(--mh-border-hard, var(--mh-border));
  background: var(--mh-surface-sub);
  border-radius: 0 var(--mh-r) var(--mh-r) 0;
}
.mh-cposts p { margin: 0 0 var(--mh-1); font-size: var(--mh-t-sm); line-height: 1.8; }
.mh-cposts span { font-size: var(--mh-t-2xs); color: var(--mh-text-4); }

/* ── The phone action bar ────────────────────────────────────────
   Above the home indicator, never under it, and the page reserves the
   same height at its end so the bar cannot cover the last section. */

.mh-pbar { display: none; }

/* ═══════════════════════ RESPONSIVE POLISH ═══════════════════════

   Mobile first is not a media query — it is what the page already does
   before any of them: one column, fluid images, wrapping metadata,
   `min-width: 0` on every grid child. What follows narrows the few
   places that genuinely need less room, so a viewport this file has
   never heard of still renders the page rather than falling off it. */

@media (max-width: 819px) {
  .mh-pbar {
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    z-index: 40;
    display: flex;
    gap: var(--mh-2);
    padding: var(--mh-3) var(--mh-4);
    padding-bottom: calc(var(--mh-3) + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--mh-border);
    background: var(--mh-surface);
    }
  .mh-pbar__btn { flex: 1 1 0; justify-content: center; min-width: 0; }
  .mh-pbar__btn span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .mh-ppage { padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)); }

  /* The header's own share and edit controls are the bar's job down
     here; two of each on one screen is one too many. */
  .mh-phead__actions { display: none; }
}

@media (max-width: 640px) {
  /* `--mh-hero-lift` is a share of the photo, and the photo is a clamp
     on the viewport, so the overlap now scales on its own. The two
     hand-tuned lifts that used to live here (-38px, -30px) were fixed
     numbers chasing a fluid size and they no longer agree with it. */
  .mh-phead__bar { padding-inline: var(--mh-5); }
  .mh-psection__head, .mh-psection__body { padding-inline: var(--mh-5); }
  .mh-buybox { padding: var(--mh-4); }
  .mh-shero__media { aspect-ratio: 16 / 9; }

  .mh-phead__name h1 { font-size: var(--mh-t-h2); overflow-wrap: anywhere; }
  .mh-phead__headline { font-size: var(--mh-t-sm); }

  /* A 288px panel hanging off a control near one edge runs past the
     other. On a phone it becomes what a share sheet is on a phone:
     pinned to the bottom, inset from both edges, sized by the screen. */
  .mh-sharesheet__panel {
    position: fixed;
    inset-inline: var(--mh-4);
    inset-block: auto var(--mh-4);
    width: auto;
  }
}

@media (max-width: 380px) {
  .mh-pbar { padding-inline: var(--mh-2); }
  .mh-pbar__btn span { font-size: var(--mh-t-2xs); }
}

/* ═══════════════════════ INSIDE THE PORTAL ═══════════════════════

   The screens the public half added to the dashboard: the public
   profile editor, the ticket list and thread, and talent search. They
   are portal screens, so they use the portal's card, field, button and
   badge — what is here is only what none of those already covered. */

.mh-viewport { display: grid; gap: var(--mh-5); }

.mh-card__title {
  margin: 0 0 var(--mh-4);
  font-size: var(--mh-t-h2);
  font-weight: 700;
}

.mh-grid2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  gap: var(--mh-3);
}

.mh-back {
  display: inline-flex;
  align-items: center;
  gap: var(--mh-1);
  margin-bottom: var(--mh-2);
  font-size: var(--mh-t-xs);
  color: var(--mh-text-3);
  text-decoration: none;
}
.mh-back:hover { color: var(--mh-accent-text); }

.mh-note {
  display: flex;
  align-items: flex-start;
  gap: var(--mh-2);
  margin: 0 0 var(--mh-3);
  padding: var(--mh-3);
  border: 1px solid var(--mh-border);
  border-radius: var(--mh-r);
  background: var(--mh-surface-sub);
  font-size: var(--mh-t-sm);
  color: var(--mh-text-2);
}
.mh-note .mh-icon { flex: 0 0 auto; margin-top: 2px; color: var(--mh-text-4); }
.mh-note--ok { border-color: var(--mh-success-line); background: var(--mh-success-bg); }
.mh-note--ok .mh-icon { color: var(--mh-success); }
.mh-note--warn { border-color: var(--mh-warn-line, rgba(251,191,36,.24)); background: var(--mh-warn-bg, #241b08); }
.mh-note--warn .mh-icon { color: var(--mh-warn, #fbbf24); }

/* ── Completeness ────────────────────────────────────────────────*/

.mh-pcomplete { display: grid; gap: var(--mh-2); }
.mh-pcomplete__bar {
  height: 8px;
  border-radius: var(--mh-r-pill);
  background: var(--mh-surface-hard);
  overflow: hidden;
}
.mh-pcomplete__bar span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--mh-accent);
  transition: width var(--mh-t-fast);
}
.mh-pcomplete p { margin: 0; font-size: var(--mh-t-xs); color: var(--mh-text-3); }
.mh-pcomplete strong { color: var(--mh-text); margin-inline-end: var(--mh-1); }

/* ── Image upload ────────────────────────────────────────────────*/

.mh-pimages {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: var(--mh-4);
}
.mh-pimage {
  display: grid;
  gap: var(--mh-2);
  padding: var(--mh-3);
  border: 1px solid var(--mh-border);
  border-radius: var(--mh-r-lg);
  background: var(--mh-surface-sub);
}
.mh-pimage__label { font-size: var(--mh-t-xs); color: var(--mh-text-3); }
.mh-pimage__preview {
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px dashed var(--mh-border-strong);
  border-radius: var(--mh-r);
  background: var(--mh-bg);
  color: var(--mh-text-4);
}
.mh-pimage__preview img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mh-pimage__preview--avatar { aspect-ratio: 1 / 1; max-width: 132px; border-radius: var(--mh-r-pill); }
.mh-pimage__preview--cover { aspect-ratio: 16 / 5; }
.mh-pimage__actions { display: flex; gap: var(--mh-2); flex-wrap: wrap; }
.mh-pimage__msg { margin: 0; min-height: 1em; font-size: var(--mh-t-2xs); color: var(--mh-text-3); }
.mh-pimage__msg.is-error { color: var(--mh-danger, #f87171); }

/* ── Editable lists ──────────────────────────────────────────────*/

.mh-pitems { margin: 0 0 var(--mh-4); padding: 0; list-style: none; display: grid; gap: var(--mh-2); }
.mh-pitems li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--mh-3);
  padding: var(--mh-3);
  border: 1px solid var(--mh-border);
  border-radius: var(--mh-r);
  background: var(--mh-surface-sub);
}
.mh-pitems small { display: block; font-size: var(--mh-t-2xs); color: var(--mh-text-3); }
.mh-pitemform { padding-top: var(--mh-4); border-top: 1px solid var(--mh-border); }

/* ── Tickets ─────────────────────────────────────────────────────*/

.mh-tlist { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--mh-2); }
.mh-tlist a {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: var(--mh-3);
  padding: var(--mh-3);
  border: 1px solid var(--mh-border);
  border-radius: var(--mh-r);
  background: var(--mh-surface-sub);
  color: var(--mh-text);
  text-decoration: none;
}
.mh-tlist a:hover { border-color: var(--mh-border-hard); }
.mh-tlist__ref { font-family: var(--mh-font-mono); font-size: var(--mh-t-2xs); color: var(--mh-text-4); }
.mh-tlist__subject { min-width: 0; }
.mh-tlist__subject small { display: block; font-size: var(--mh-t-2xs); color: var(--mh-text-3); }
.mh-tlist time { font-size: var(--mh-t-2xs); color: var(--mh-text-4); white-space: nowrap; }

.mh-thread { margin: 0 0 var(--mh-4); padding: 0; list-style: none; display: grid; gap: var(--mh-3); }
.mh-thread__msg {
  padding: var(--mh-3) var(--mh-4);
  border: 1px solid var(--mh-border);
  border-radius: var(--mh-r-lg);
  background: var(--mh-surface-sub);
}
.mh-thread__msg.is-staff { border-inline-start: 3px solid var(--mh-accent); }
.mh-thread__msg.is-mine { border-inline-start: 3px solid var(--mh-border-hard); }
.mh-thread__who {
  display: flex;
  align-items: baseline;
  gap: var(--mh-3);
  margin-bottom: var(--mh-1);
  font-size: var(--mh-t-xs);
}
.mh-thread__who time { color: var(--mh-text-4); font-size: var(--mh-t-2xs); }
.mh-thread__msg p { margin: 0; font-size: var(--mh-t-sm); color: var(--mh-text-2); white-space: pre-wrap; overflow-wrap: anywhere; }
.mh-thread__reply { padding-top: var(--mh-4); border-top: 1px solid var(--mh-border); }
.mh-thread__closed { align-items: center; gap: var(--mh-3); flex-wrap: wrap; }

/* ── Talent search ───────────────────────────────────────────────*/

.mh-tfilters { display: grid; gap: var(--mh-4); }
.mh-tfilters__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
  gap: var(--mh-3);
}
.mh-tfilters__check { align-self: end; }

.mh-tcards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
  gap: var(--mh-4);
}
.mh-tcard {
  display: grid;
  gap: var(--mh-3);
  padding: var(--mh-4);
  border: 1px solid var(--mh-border);
  border-radius: var(--mh-r-lg);
  background: var(--mh-surface);
  min-width: 0;
}
.mh-tcard__head { display: flex; gap: var(--mh-3); align-items: center; min-width: 0; }
.mh-tcard__id { min-width: 0; }
.mh-tcard__name { display: flex; align-items: center; gap: var(--mh-2); font-weight: 700; }
.mh-tcard__name a { color: var(--mh-text); text-decoration: none; }
.mh-tcard__name a:hover { color: var(--mh-accent-text); }
.mh-tcard__id p { margin: 2px 0 0; font-size: var(--mh-t-xs); color: var(--mh-text-3); }
.mh-tcard__meta { display: flex; flex-wrap: wrap; gap: var(--mh-3); }
.mh-tcard__cta { justify-content: center; margin-top: auto; }

/* ═══════════════ The public-profile editor ═══════════════

   A preview, an index, and sections. The preview is the public page's
   own header rendered here, so the person editing is looking at the
   thing they are editing rather than imagining it; the index turns the
   page's length from something you discover by scrolling into something
   you can see; and the sections give every group of fields a heading
   and a sentence saying what it is for. */

.mh-editor__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--mh-5);
  align-items: start;
}

@media (min-width: 940px) {
  .mh-editor__body { grid-template-columns: 232px minmax(0, 1fr); }
  .mh-eindex { position: sticky; top: var(--mh-5); }
}

.mh-editor__main { display: grid; gap: var(--mh-5); min-width: 0; }

/* ── The index ─────────────────────────────────────────── */

.mh-eindex {
  border: 1px solid var(--mh-border);
  border-radius: var(--mh-r-lg);
  background: var(--mh-surface-2);
  padding: var(--mh-5);
  min-width: 0;
}

.mh-eindex__title {
  margin: 0 0 var(--mh-3);
  font-size: var(--mh-t-2xs);
  letter-spacing: .04em;
  color: var(--mh-text-2);
}

.mh-eindex ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }

.mh-eindex a {
  display: flex;
  align-items: center;
  gap: var(--mh-2);
  padding: 8px 10px;
  border-radius: var(--mh-r-md);
  color: var(--mh-text-2);
  font-size: var(--mh-t-sm);
  text-decoration: none;
  min-width: 0;
}

.mh-eindex a:hover,
.mh-eindex a:focus-visible { background: var(--mh-surface-3); color: var(--mh-text-1); }

.mh-eindex a span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* On a narrow screen the index becomes a scrolling strip rather than a
   column of links pushing the first field below the fold. */
@media (max-width: 939px) {
  .mh-eindex ul {
    grid-auto-flow: column;
    grid-auto-columns: max-content;
    overflow-x: auto;
    scrollbar-width: thin;
    padding-bottom: 4px;
  }

  .mh-eindex a { border: 1px solid var(--mh-border); white-space: nowrap; }
}

/* ── The preview ───────────────────────────────────────── */

.mh-epreview { padding: 0; overflow: hidden; }

.mh-epreview__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--mh-3);
  padding: var(--mh-5) var(--mh-6);
  border-bottom: 1px solid var(--mh-border);
}

.mh-epreview__bar .mh-card__title {
  display: flex;
  align-items: center;
  gap: var(--mh-2);
  margin: 0;
}

.mh-epreview__frame { position: relative; }

.mh-epreview__cover {
  height: 132px;
  background: var(--mh-surface-sub);
  background-size: cover;
  background-position: center;
  display: grid;
  place-items: center;
}

.mh-epreview__coverhint { font-size: var(--mh-t-2xs); color: var(--mh-text-2); }

/* The preview mirrors the public header, including how the photo meets
   the cover: the *picture* climbs onto it and the name does not.

   It used to lift the whole row — avatar and text together — so the
   name sat on the cover with the picture, which is not what the page
   this is previewing does. A preview that differs from the page is
   worse than none: it teaches somebody the wrong thing about their own
   profile. */
.mh-epreview__id {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--mh-5);
  align-items: end;
  padding: var(--mh-4) var(--mh-6) var(--mh-5);
}

.mh-epreview__id > .mh-avatar {
  position: relative;
  z-index: 1;
  margin-top: calc((34px + var(--mh-4)) * -1);
}

.mh-epreview__id .mh-avatar {
  border: 3px solid var(--mh-surface-1);
  border-radius: var(--mh-r-pill);
}

.mh-epreview__text { min-width: 0; padding-bottom: 2px; }

.mh-epreview__text h3 {
  display: flex;
  align-items: center;
  gap: var(--mh-2);
  margin: 0;
  font-size: var(--mh-t-title);
  min-width: 0;
}

.mh-epreview__text p {
  margin: 2px 0 6px;
  font-size: var(--mh-t-sm);
  color: var(--mh-text-3);
  overflow-wrap: anywhere;
}

.mh-epreview__meter {
  display: grid;
  gap: var(--mh-2);
  padding: var(--mh-4) var(--mh-5);
  border-top: 1px solid var(--mh-border);
}

.mh-epreview__meter p { margin: 0; font-size: var(--mh-t-2xs); color: var(--mh-text-3); }
.mh-epreview__meter strong { color: var(--mh-text-1); margin-inline-end: 6px; }

/* ── What is still missing, as a list you can click ─────── */

.mh-echecklist {
  padding: var(--mh-5) var(--mh-6) var(--mh-6);
  border-top: 1px solid var(--mh-border);
}
.mh-echecklist__title {
  display: flex;
  align-items: center;
  gap: var(--mh-2);
  margin: 0 0 var(--mh-3);
  font-size: var(--mh-t-xs);
  font-weight: 500;
}
.mh-echecklist__title .mh-icon { color: var(--mh-accent-text); }
.mh-echecklist ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--mh-2);
}
.mh-echecklist li > *,
.mh-echecklist li {
  display: inline-flex;
  align-items: center;
  gap: var(--mh-2);
}
.mh-echecklist li > a,
.mh-echecklist li.is-done {
  padding: var(--mh-1) var(--mh-3);
  border: 1px solid var(--mh-border);
  border-radius: var(--mh-r-pill);
  font-size: var(--mh-t-2xs);
  text-decoration: none;
  /* A comfortable target on a phone without making the row tall. */
  min-height: 32px;
}
.mh-echecklist li > a { color: var(--mh-text); background: var(--mh-surface); }
.mh-echecklist li > a:hover,
.mh-echecklist li > a:focus-visible {
  border-color: var(--mh-accent);
  color: var(--mh-accent-text);
}
.mh-echecklist li.is-done {
  color: var(--mh-text-3);
  background: var(--mh-surface-sub);
  border-style: dashed;
}
.mh-echecklist__mark { display: inline-flex; flex: 0 0 auto; }
.mh-echecklist li.is-done .mh-echecklist__mark { color: var(--mh-ok, #16a34a); }
.mh-echecklist li > a .mh-echecklist__mark { color: var(--mh-text-4); }

/* ── A section ─────────────────────────────────────────── */

/* The editor's section cards had no padding at all — `.mh-card` gives
   a border, a radius and a surface, and the padding lives on
   `.mh-card__head` / `.mh-card__body`, which these sections do not use
   because their heading is `.mh-esec__head`. So every label, hint and
   field sat flush against the border. It read as cramped because it
   was: zero. */
.mh-esec {
  padding: var(--mh-6);
  scroll-margin-top: var(--mh-5);
}
@media (max-width: 640px) {
  .mh-esec { padding: var(--mh-5); }
}
.mh-esec:focus { outline: none; }
.mh-esec:target { outline: 1px solid var(--mh-border-strong); }

.mh-esec__head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--mh-3);
  align-items: start;
  margin-bottom: var(--mh-4);
}

.mh-esec__icon {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: var(--mh-r-md);
  border: 1px solid var(--mh-border);
  background: var(--mh-surface-2);
  color: var(--mh-text-3);
}

.mh-esec__head .mh-card__title { margin: 0 0 2px; }
.mh-esec__head .mh-hint { margin: 0; }

/* "Does a stranger see this?", answered on the section itself.
   Its own column on a desktop; below the heading on a phone, where
   there is no room for a third column and the answer is still the
   first thing under the title. */
@media (min-width: 720px) {
  .mh-esec__head { grid-template-columns: auto minmax(0, 1fr) auto; }
}
.mh-esec__scope {
  display: inline-flex;
  align-items: center;
  gap: var(--mh-2);
  align-self: start;
  padding: 4px var(--mh-2);
  border: 1px solid var(--mh-border);
  border-radius: var(--mh-r-pill);
  font-size: var(--mh-t-2xs);
  color: var(--mh-text-3);
  white-space: nowrap;
}
@media (max-width: 719px) {
  /* Second row, under the icon column, so it lines up with the text
     rather than starting at the card edge. */
  .mh-esec__scope { grid-column: 2; }
}
.mh-esec__scope--private {
  border-color: var(--mh-warn-line, rgba(251, 191, 36, 0.24));
  color: var(--mh-warn, #fbbf24);
}
.mh-esec__scope .mh-icon { flex: none; }

/* ── Save row, skills, disclosure ──────────────────────── */

.mh-esave { align-items: center; gap: var(--mh-3); }

.mh-esave__state {
  font-size: var(--mh-t-2xs);
  color: var(--mh-warn, #d08700);
}

.mh-echips {
  list-style: none;
  margin: 0 0 var(--mh-4);
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.mh-echips li {
  padding: 3px 10px;
  border-radius: var(--mh-r-pill);
  border: 1px dashed var(--mh-border);
  font-size: var(--mh-t-2xs);
  color: var(--mh-text-3);
}

/* The first few are the ones the public page shows; saying which is
   cheaper than a person discovering the limit by counting. */
.mh-echips li.is-shown {
  border-style: solid;
  border-color: var(--mh-border-strong);
  color: var(--mh-text-1);
}

.mh-edisclose { margin-top: var(--mh-4); }

.mh-edisclose > summary {
  display: inline-flex;
  align-items: center;
  gap: var(--mh-2);
  cursor: pointer;
  padding: 8px 14px;
  border: 1px solid var(--mh-border);
  border-radius: var(--mh-r-pill);
  font-size: var(--mh-t-sm);
  color: var(--mh-text-2);
  list-style: none;
}

.mh-edisclose > summary::-webkit-details-marker { display: none; }
.mh-edisclose[open] > summary { margin-bottom: var(--mh-4); }

/* ── Images ────────────────────────────────────────────── */

.mh-pimage.is-busy { opacity: .75; }

.mh-pimage__busy {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--mh-surface-1) 62%, transparent);
  border-radius: inherit;
}

.mh-spinner {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid var(--mh-border-strong);
  border-top-color: transparent;
  animation: mh-spin 700ms linear infinite;
}

@keyframes mh-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .mh-spinner { animation-duration: 2s; }
}

/* ── Verification documents ────────────────────────────── */

.mh-edocs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: var(--mh-4);
  margin: var(--mh-4) 0;
}

.mh-edoc {
  display: grid;
  gap: 6px;
  padding: var(--mh-4);
  border: 1px dashed var(--mh-border-strong);
  border-radius: var(--mh-r-lg);
  background: var(--mh-surface-2);
  min-width: 0;
}

.mh-edoc .mh-hint { overflow-wrap: anywhere; }
.mh-edoc .mh-hint.is-error { color: var(--mh-danger, #d33); }

.mh-req {
  margin-inline-start: 6px;
  font-style: normal;
  font-size: var(--mh-t-2xs);
  color: var(--mh-danger, #d33);
}

.mh-everify__sa[hidden],
.mh-everify__other[hidden] { display: none !important; }

/* ── Touch targets ───────────────────────────────────────────────

   Keyed on the pointer, not on the width. A 32px control is fine under
   a mouse and awkward under a thumb, and the difference is the input
   device rather than the size of the window — a touchscreen laptop at
   1440px needs the larger target and a narrow desktop window does not.

   So the desktop product is untouched, and every small control on
   these screens becomes a comfortable one wherever the pointer is
   coarse. 44px is the figure both platform guidelines settle on. */

@media (pointer: coarse) {
  .mh-ppage .mh-btn,
  .mh-ppage summary,
  .mh-editor .mh-btn,
  .mh-editor summary,
  .mh-ownbar .mh-btn { min-height: 44px; }

  .mh-ppage .mh-btn--sm,
  .mh-editor .mh-btn--sm { padding-inline: var(--mh-4); }

  /* The two bars a thumb actually uses: the profile's own actions, and
     the dashboard's tab strip. */
  .mh-pbar__btn { min-height: 44px; }
  .mh-nav__item { min-height: 44px; }

  .mh-plinks a,
  .mh-eindex a,
  .mh-echecklist li > a,
  .mh-echecklist li.is-done,
  .mh-sharesheet__net,
  .mh-cservices a,
  .mh-cjobs a { min-height: 44px; }

  .mh-plinks a { padding: var(--mh-2) 0; }
  .mh-sharesheet__net { padding-block: var(--mh-3); }
}

/* ═══════════════════ A CLOSED PROFILE (4.3) ═══════════════════
   `/profile/{username}` when the owner made the page private. One
   card, centred, with nothing of the account on it but the handle
   the visitor typed. */
.mh-ppage--locked { min-height: 60vh; display: grid; place-items: center; padding: var(--mh-10) var(--mh-4); }
.mh-plocked {
  width: min(100%, 520px);
  text-align: center;
  padding: var(--mh-10) var(--mh-6);
  border: 1px solid var(--mh-border);
  border-radius: var(--mh-r-xl, var(--mh-r-lg));
  background: var(--mh-surface);
}
.mh-plocked__mark {
  display: grid;
  place-items: center;
  width: 64px; height: 64px;
  margin: 0 auto var(--mh-4);
  border: 1px solid var(--mh-border-strong);
  border-radius: 50%;
  background: var(--mh-surface-sub);
  color: var(--mh-text-2);
}
.mh-plocked__handle {
  display: inline-block;
  margin-bottom: var(--mh-3);
  padding: 2px 10px;
  border-radius: var(--mh-r-pill);
  border: 1px solid var(--mh-border);
  background: var(--mh-surface-sub);
  font-family: var(--mh-font-mono, ui-monospace, monospace);
  font-size: var(--mh-t-xs);
  color: var(--mh-text-2);
  overflow-wrap: anywhere;
  max-width: 100%;
}
.mh-plocked h1 { font-size: var(--mh-t-h2); font-weight: 600; margin: 0 0 var(--mh-2); }
.mh-plocked__lead { color: var(--mh-text-2); margin: 0 0 var(--mh-4); line-height: var(--mh-lh); }
.mh-plocked__note {
  display: inline-flex; align-items: center; gap: var(--mh-2);
  margin: 0 0 var(--mh-6);
  font-size: var(--mh-t-2xs); color: var(--mh-text-3);
}
.mh-plocked__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--mh-2); }
@media (max-width: 480px) {
  .mh-plocked { padding: var(--mh-8) var(--mh-4); }
  .mh-plocked__actions .mh-btn { width: 100%; justify-content: center; }
}

/* ── Identity verification: the card and the note (4.5.1) ────────
   One state, two shapes. The card is for a dashboard, where an
   account's own standing is the subject; the note is for a page about
   something else, where verification is a detail that changes what
   happens next. Neither promises anything the review does not give:
   priority in a queue, never a place in it. */

.mh-vcard {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--mh-4);
  min-width: 0;
  padding: var(--mh-5);
  border: 1px solid var(--mh-accent-line);
  border-radius: var(--mh-r-lg);
  background:
    radial-gradient(120% 100% at 100% 0%, color-mix(in srgb, var(--mh-accent) 10%, transparent) 0%, transparent 62%),
    var(--mh-surface);
}
.mh-vcard__icon {
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  border-radius: var(--mh-r);
  border: 1px solid var(--mh-accent-line);
  background: var(--mh-accent-soft);
  color: var(--mh-accent-text);
  flex-shrink: 0;
}
.mh-vcard__body { min-width: 0; }
.mh-vcard__title {
  margin: 0;
  font-size: var(--mh-t-h3);
  font-weight: 500;
  color: var(--mh-text);
  line-height: var(--mh-lh-tight);
}
.mh-vcard__text {
  margin: var(--mh-2) 0 0;
  font-size: var(--mh-t-xs);
  color: var(--mh-text-2);
  line-height: var(--mh-lh-snug);
  max-width: 68ch;
}
.mh-vcard__note { margin: var(--mh-2) 0 0; font-size: var(--mh-t-2xs); color: var(--mh-warn); }
.mh-vcard__cta { white-space: nowrap; }
.mh-vcard--compact { padding: var(--mh-4); gap: var(--mh-3); }
.mh-vcard--compact .mh-vcard__icon { width: 38px; height: 38px; }

.mh-vstate {
  display: flex;
  align-items: center;
  gap: var(--mh-2);
  margin: 0;
  font-size: var(--mh-t-xs);
  color: var(--mh-text-2);
}
.mh-vstate--ok .mh-icon { color: var(--mh-success); }
.mh-vstate--wait .mh-icon { color: var(--mh-warn); }

/* The identity chip — what the promotional card becomes once there is
   nothing left to ask for. Deliberately not `.mh-vbadge`, which is the
   small round tick beside a name in the sidebar and on public profiles;
   two different things wearing one class is how a restyle of one
   silently redraws the other. */
.mh-idbadge {
  display: inline-flex;
  align-items: center;
  gap: var(--mh-2);
  margin: 0;
  padding: var(--mh-2) var(--mh-3);
  border: 1px solid color-mix(in srgb, var(--mh-success) 28%, var(--mh-border));
  border-radius: 999px;
  background: color-mix(in srgb, var(--mh-success) 8%, var(--mh-surface));
  font-size: var(--mh-t-xs);
  font-weight: 600;
  color: var(--mh-text-1);
  line-height: 1;
}
.mh-idbadge .mh-icon { color: var(--mh-success); width: 16px; height: 16px; }

.mh-vnote {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: var(--mh-2) var(--mh-3);
  padding: var(--mh-3) var(--mh-4);
  border: 1px solid var(--mh-border);
  border-radius: var(--mh-r);
  background: var(--mh-surface);
  font-size: var(--mh-t-xs);
  color: var(--mh-text-2);
  line-height: var(--mh-lh-snug);
}
.mh-vnote > .mh-icon { margin-top: 2px; color: var(--mh-accent-text); }
.mh-vnote strong { display: block; color: var(--mh-text); font-weight: 500; }
.mh-vnote__cta {
  grid-column: 2;
  display: inline-flex;
  align-items: center;
  gap: var(--mh-1);
  font-size: var(--mh-t-2xs);
  font-weight: 500;
  color: var(--mh-accent-text);
  text-decoration: none;
}
.mh-vnote__cta:hover { text-decoration: underline; }
.mh-vnote--ok { border-color: var(--mh-success-line); background: var(--mh-success-bg); }
.mh-vnote--ok > .mh-icon { color: var(--mh-success); }
.mh-vnote--wait { border-color: var(--mh-warn-line); background: var(--mh-warn-bg); }
.mh-vnote--wait > .mh-icon { color: var(--mh-warn); }

@media (max-width: 720px) {
  .mh-vcard { grid-template-columns: auto minmax(0, 1fr); }
  .mh-vcard__cta { grid-column: 1 / -1; justify-content: center; width: 100%; }
}

/* ═══════════════════════ GOOGLE SIGN-IN (4.18.0) ═══════════════════════ */
.mh-gsi { display: grid; gap: var(--mh-2); justify-items: center; }
.mh-gsi__btn { width: 100%; min-height: 44px; display: flex; justify-content: center; }
.mh-gsi__busy { margin: 0; font-size: var(--mh-t-xs); color: var(--mh-text-2); }
.mh-gsi__err { margin: 0; font-size: var(--mh-t-xs); text-align: center; }
.mh-gsi__terms { margin: 0; font-size: var(--mh-t-2xs); color: var(--mh-text-4); text-align: center; line-height: 1.7; }
.mh-gsi__terms a { color: inherit; text-decoration: underline; }
.mh-buyauth { display: grid; gap: var(--mh-3); padding: var(--mh-4); border: 1px solid var(--mh-border); border-radius: var(--mh-r-lg); background: var(--mh-surface-sub); }
.mh-buyauth[hidden] { display: none; }
.mh-buyauth__title { margin: 0; font-size: var(--mh-t-sm); font-weight: 700; color: var(--mh-text); text-align: center; }
.mh-buyauth__or { display: flex; align-items: center; gap: var(--mh-2); margin: 0; font-size: var(--mh-t-2xs); color: var(--mh-text-4); }
.mh-buyauth__or::before, .mh-buyauth__or::after { content: ""; flex: 1; height: 1px; background: var(--mh-border); }
.mh-buyauth__email { display: block; text-align: center; font-size: var(--mh-t-xs); font-weight: 600; color: var(--mh-accent-text); }
.mh-auth__or { margin: var(--mh-3) 0; }
.mh-chooser__google { display: grid; gap: var(--mh-3); max-width: 420px; margin: 0 auto var(--mh-4); }
.mh-chooser__google-title { margin: 0; text-align: center; font-weight: 700; color: var(--mh-text); }

/* 4.19.0 — «أدلة مفيدة» on a service page (blog module). */
.mh-guides { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.mh-guides a { color: var(--mh-accent-text); font-weight: 600; }