/* MediHelp shared building blocks for signed-in pages (wsC1 / N3).
   Page head + breadcrumb, action bar, buttons, modal shell (+ legacy dialog adapter), share sheet,
   upgrade dialog, locked state, empty / error / loading states. Behaviour: js/mh-ui.js.
   Calm and clinical (C8): solid colours, line icons, no gradients, no glow. Touch targets >= 44px,
   text >= 12px (C6). Logical properties for RTL. */

:root {
  --mh-ui-panel: var(--mh-bg-alt, var(--mh-bg, #0f1419));
  --mh-ui-line: var(--mh-card-border, rgba(160, 214, 255, 0.14));
  --mh-ui-raise: color-mix(in srgb, var(--mh-text, #fff) 5%, transparent);
  --mh-ui-raise-strong: color-mix(in srgb, var(--mh-text, #fff) 9%, transparent);
  --mh-ui-accent: var(--mh-accent, #00d9ff);
  --mh-ui-on-accent: #04131f;
  --mh-ui-radius: 16px;
  --mh-ui-tap: 44px;
  --mh-ui-danger: #f87171;
  --mh-ui-success: #34d399;
}
[data-theme="light"] {
  --mh-ui-accent: #0277a8;
  --mh-ui-on-accent: #ffffff;
  --mh-ui-danger: #b91c1c;
  --mh-ui-success: #047857;
}

.mh-visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
[dir="rtl"] .mh-flip-rtl { transform: scaleX(-1); }

/* ── Buttons (C7: one primary style) ───────────────────────────────── */
.mh-ui-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: var(--mh-ui-tap); padding: .625rem 1.25rem; border-radius: 999px;
  border: 1px solid transparent; background: var(--mh-ui-accent); color: var(--mh-ui-on-accent);
  font: inherit; font-size: .9375rem; font-weight: 700; line-height: 1.2; text-align: center;
  text-decoration: none; cursor: pointer; transition: filter .15s ease, background-color .15s ease;
}
.mh-ui-btn:hover { filter: brightness(1.06); }
.mh-ui-btn:focus-visible, .mh-action:focus-visible, .mh-dialog__close:focus-visible, .mh-share-option:focus-visible,
.mh-plan:focus-visible, .mh-segmented button:focus-visible, .mh-crumbs a:focus-visible {
  outline: 2px solid var(--mh-ui-accent); outline-offset: 2px;
}
.mh-ui-btn[disabled], .mh-ui-btn[aria-busy="true"] { opacity: .6; cursor: progress; }
.mh-ui-btn--secondary { background: var(--mh-ui-raise); color: var(--mh-text); border-color: var(--mh-ui-line); }
.mh-ui-btn--secondary:hover { background: var(--mh-ui-raise-strong); filter: none; }
.mh-ui-btn--ghost { background: transparent; color: var(--mh-muted-strong, var(--mh-text)); border-color: transparent; }
.mh-ui-btn--ghost:hover { background: var(--mh-ui-raise); filter: none; }

/* ── Page head (B15) ───────────────────────────────────────────────── */
.mh-page-head { display: grid; gap: .5rem; margin: 0 0 1.25rem; min-width: 0; text-align: start; }
.mh-crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 0 .25rem; margin: 0; padding: 0; list-style: none; font-size: .875rem; color: var(--mh-muted); }
.mh-crumbs li { display: inline-flex; align-items: center; min-width: 0; }
.mh-crumbs li:not(:last-child)::after { content: "/"; margin-inline: .25rem; opacity: .6; }
.mh-crumbs a { display: inline-flex; align-items: center; min-height: var(--mh-ui-tap); padding-inline: .125rem; color: inherit; text-decoration: none; }
.mh-crumbs a:hover { color: var(--mh-text); text-decoration: underline; }
.mh-crumbs [aria-current="page"] { color: var(--mh-muted-strong, var(--mh-text)); overflow-wrap: anywhere; }
.mh-page-head__row { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: .75rem 1rem; }
.mh-page-head__text { flex: 1 1 18rem; min-width: 0; }
.mh-page-head__title { margin: 0; font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem); font-weight: 800; line-height: 1.2; color: var(--mh-text); overflow-wrap: break-word; hyphens: manual; }
.mh-page-head__purpose { margin: .375rem 0 0; max-width: 46rem; font-size: 1rem; line-height: 1.5; color: var(--mh-muted); }

/* ── Action bar (header actions; never floating — B9) ─────────────── */
.mh-action-bar { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.mh-action {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  min-height: var(--mh-ui-tap); min-width: var(--mh-ui-tap); padding: .5rem .875rem; border-radius: 999px;
  border: 1px solid var(--mh-ui-line); background: var(--mh-ui-raise); color: var(--mh-text);
  font: inherit; font-size: .875rem; font-weight: 600; line-height: 1.2; text-decoration: none; cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.mh-action:hover { background: var(--mh-ui-raise-strong); }
.mh-action[aria-pressed="true"] { color: var(--mh-ui-accent); border-color: color-mix(in srgb, var(--mh-ui-accent) 45%, transparent); }
.mh-action[aria-pressed="true"] svg { fill: currentColor; }
.mh-action--primary { background: var(--mh-ui-accent); color: var(--mh-ui-on-accent); border-color: transparent; }
.mh-action--primary:hover { background: var(--mh-ui-accent); filter: brightness(1.06); }
.mh-action[disabled] { opacity: .55; cursor: default; }
@media (max-width: 639.98px) {
  .mh-page-head__row { gap: .625rem; }
}

/* ── Modal shell (B11) ─────────────────────────────────────────────── */
html.mh-ui-scroll-lock, html.mh-ui-scroll-lock body { overflow: hidden !important; }
html.mh-ui-scroll-lock body { padding-inline-end: var(--mh-scrollbar-gap, 0px); overscroll-behavior: none; }

/* !important: beats site.css `body.mh-shell > :not(...)` (position:relative; z-index:1); above the MediMate FAB/sheet. */
.mh-dialog { position: fixed !important; inset: 0; z-index: 10000 !important; display: flex; align-items: center; justify-content: center; padding: 1rem; }
.mh-dialog[hidden] { display: none !important; }
.mh-dialog__backdrop { position: absolute; inset: 0; background: rgba(3, 8, 14, .62); }
.mh-dialog__panel {
  position: relative; display: flex; flex-direction: column; width: min(32rem, 100%); max-height: calc(100dvh - 2rem);
  border: 1px solid var(--mh-ui-line); border-radius: 20px; background: var(--mh-ui-panel); color: var(--mh-text);
  box-shadow: 0 24px 64px rgba(0, 0, 0, .35); overflow: hidden; outline: none;
}
.mh-dialog__head { display: flex; align-items: center; gap: .75rem; padding: 1rem 1rem .5rem 1.25rem; padding-inline: 1.25rem .75rem; }
.mh-dialog__title { flex: 1; margin: 0; font-size: 1.125rem; font-weight: 800; line-height: 1.3; }
.mh-dialog__close, .mh-dialog-legacy__close {
  display: inline-flex !important; align-items: center; justify-content: center; flex: none;
  min-width: var(--mh-ui-tap) !important; min-height: var(--mh-ui-tap) !important; border-radius: 999px;
  border: 0; background: transparent; color: var(--mh-muted-strong, var(--mh-text)); cursor: pointer;
}
.mh-dialog__close:hover { background: var(--mh-ui-raise); color: var(--mh-text); }
.mh-dialog__body { padding: .25rem 1.25rem 1.25rem; overflow-y: auto; overscroll-behavior: contain; min-height: 0; }
.mh-dialog__foot { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: flex-end; padding: .875rem 1.25rem 1.25rem; border-top: 1px solid var(--mh-ui-line); }
.mh-dialog__foot > .mh-ui-btn { flex: 1 1 10rem; }

@media (max-width: 639.98px) {
  .mh-dialog { align-items: flex-end; padding: 0; }
  .mh-dialog__panel {
    width: 100%; max-height: 92dvh; border-radius: 20px 20px 0 0; border-bottom: 0;
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .mh-dialog__foot { flex-direction: column-reverse; }
  .mh-dialog__foot > .mh-ui-btn { flex: none; width: 100%; }
}
@media (prefers-reduced-motion: no-preference) {
  .mh-dialog:not([hidden]) .mh-dialog__panel { animation: mh-ui-rise .18s ease-out; }
  @keyframes mh-ui-rise { from { transform: translateY(12px); opacity: 0; } to { transform: none; opacity: 1; } }
}

/* Legacy dialogs migrated with data-mh-dialog: same behaviour, bottom sheet on phones. */
@media (max-width: 639.98px) {
  .mh-dialog-legacy:not(.mh-dialog-legacy--no-sheet) {
    align-items: flex-end !important; justify-content: center !important; padding: 0 !important;
  }
  .mh-dialog-legacy:not(.mh-dialog-legacy--no-sheet) > .mh-dialog-legacy__panel,
  .mh-dialog-legacy:not(.mh-dialog-legacy--no-sheet) .mh-dialog-legacy__panel {
    width: 100% !important; max-width: 100% !important; margin: 0 !important; max-height: 92dvh !important;
    overflow-y: auto !important; overscroll-behavior: contain; border-radius: 20px 20px 0 0 !important;
    padding-bottom: max(1rem, env(safe-area-inset-bottom, 0px)) !important; transform: none !important;
    inset: auto !important; position: relative !important;
  }
}

/* Native <dialog> elements: the dialog itself is the sheet. */
dialog.mh-dialog-legacy::backdrop { background: rgba(3, 8, 14, .62); }
@media (max-width: 639.98px) {
  dialog.mh-dialog-legacy:not(.mh-dialog-legacy--no-sheet) {
    margin: auto 0 0 !important; width: 100% !important; max-width: 100% !important; max-height: 92dvh !important;
    border-radius: 20px 20px 0 0 !important; padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  dialog.mh-dialog-legacy:not(.mh-dialog-legacy--no-sheet) > .mh-dialog-legacy__panel {
    width: 100% !important; max-width: 100% !important; border-radius: 20px 20px 0 0 !important; max-height: 92dvh !important;
  }
}

/* ── Share sheet (C1: one design everywhere) ───────────────────────── */
.mh-share-list { display: grid; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.mh-share-option {
  display: flex; align-items: center; gap: .875rem; width: 100%; min-height: 56px; padding: .625rem .875rem;
  border: 1px solid var(--mh-ui-line); border-radius: 14px; background: var(--mh-ui-raise); color: var(--mh-text);
  font: inherit; text-align: start; cursor: pointer;
}
.mh-share-option:hover { background: var(--mh-ui-raise-strong); }
.mh-share-option__icon {
  display: inline-flex; align-items: center; justify-content: center; flex: none; width: 40px; height: 40px;
  border-radius: 12px; background: color-mix(in srgb, var(--mh-ui-accent) 14%, transparent); color: var(--mh-ui-accent);
}
.mh-share-option__icon--whatsapp { background: color-mix(in srgb, #25d366 16%, transparent); color: #1aa851; }
.mh-share-option__text { display: grid; gap: .125rem; min-width: 0; }
.mh-share-option__label { font-size: 1rem; font-weight: 700; }
.mh-share-option__sub { font-size: .8125rem; color: var(--mh-muted); }

/* ── Upgrade dialog (decision 15) ──────────────────────────────────── */
.mh-upgrade .mh-dialog__panel { width: min(34rem, 100%); }
.mh-upgrade__lock { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 36px; height: 36px; border-radius: 10px; background: color-mix(in srgb, var(--mh-ui-accent) 14%, transparent); color: var(--mh-ui-accent); }
.mh-upgrade__body { margin: 0 0 1rem; font-size: 1rem; line-height: 1.55; color: var(--mh-muted-strong, var(--mh-text)); }
.mh-upgrade__h3 { margin: 1rem 0 .5rem; font-size: .9375rem; font-weight: 800; }
.mh-upgrade__unlocks { display: grid; gap: .375rem; margin: 0; padding: 0; list-style: none; }
.mh-upgrade__unlocks li { position: relative; padding-inline-start: 1.5rem; font-size: .9375rem; line-height: 1.45; color: var(--mh-muted-strong, var(--mh-text)); }
.mh-upgrade__unlocks li::before { content: ""; position: absolute; inset-inline-start: .25rem; top: .4em; width: .55rem; height: .3rem; border-inline-start: 2px solid var(--mh-ui-success); border-bottom: 2px solid var(--mh-ui-success); transform: rotate(-45deg); }
[dir="rtl"] .mh-upgrade__unlocks li::before { transform: rotate(45deg); }
.mh-segmented { display: inline-flex; gap: .25rem; padding: .25rem; margin-bottom: .75rem; border: 1px solid var(--mh-ui-line); border-radius: 999px; background: var(--mh-ui-raise); }
.mh-segmented button { min-height: 40px; min-width: 6rem; padding: .375rem 1rem; border: 0; border-radius: 999px; background: transparent; color: var(--mh-muted-strong, var(--mh-text)); font: inherit; font-size: .875rem; font-weight: 700; cursor: pointer; }
.mh-segmented button[aria-checked="true"] { background: var(--mh-ui-accent); color: var(--mh-ui-on-accent); }
.mh-upgrade__plans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .625rem; }
.mh-plan { display: grid; gap: .25rem; align-content: start; min-height: var(--mh-ui-tap); padding: .875rem; border: 1.5px solid var(--mh-ui-line); border-radius: 14px; background: var(--mh-ui-raise); color: var(--mh-text); font: inherit; text-align: start; cursor: pointer; }
.mh-plan[aria-checked="true"] { border-color: var(--mh-ui-accent); background: color-mix(in srgb, var(--mh-ui-accent) 9%, transparent); }
.mh-plan__top { display: flex; flex-wrap: wrap; align-items: center; gap: .375rem; }
.mh-plan__name { font-size: 1.0625rem; font-weight: 800; }
.mh-plan__badge { padding: .125rem .5rem; border-radius: 999px; background: var(--mh-ui-accent); color: var(--mh-ui-on-accent); font-size: .75rem; font-weight: 700; }
.mh-plan__tagline { font-size: .8125rem; color: var(--mh-muted); }
.mh-plan__price { margin-top: .25rem; font-size: 1.0625rem; font-weight: 800; }
.mh-plan__per { font-size: .8125rem; font-weight: 600; color: var(--mh-muted); }
.mh-upgrade__onetime { display: flex; align-items: center; gap: .45rem; margin: .75rem 0 0; padding: .55rem .75rem; border-radius: 10px; border: 1px solid color-mix(in srgb, var(--mh-ui-success) 40%, transparent); background: color-mix(in srgb, var(--mh-ui-success) 12%, transparent); color: var(--mh-text); font-size: .9375rem; font-weight: 700; line-height: 1.35; }
.mh-upgrade__onetime svg { flex: none; color: var(--mh-ui-success); }
.mh-state__note { margin: 0; font-size: .8125rem; font-weight: 700; color: var(--mh-ui-success); }
.mh-upgrade__note, .mh-upgrade__trial-note { margin: .75rem 0 0; font-size: .8125rem; line-height: 1.45; color: var(--mh-muted); }
.mh-upgrade__trial-note { width: 100%; margin: 0; text-align: center; }
.mh-upgrade__status { margin: .75rem 0 0; padding: .625rem .75rem; border-radius: 10px; font-size: .875rem; background: var(--mh-ui-raise); }
.mh-upgrade__status[data-tone="danger"] { color: var(--mh-ui-danger); }
.mh-upgrade__status[data-tone="success"] { color: var(--mh-ui-success); }
@media (max-width: 380px) { .mh-upgrade__plans { grid-template-columns: 1fr; } }

/* ── Locked state (decision 15) ────────────────────────────────────── */
.mh-locked { position: relative; cursor: pointer; }
.mh-locked > :not(.mh-lock-chip) { opacity: .62; filter: saturate(.35); }
.mh-lock-chip {
  position: absolute; inset-block-start: .625rem; inset-inline-end: .625rem; z-index: 2;
  display: inline-flex; align-items: center; gap: .3rem; min-height: 26px; padding: .2rem .6rem; border-radius: 999px;
  border: 1px solid var(--mh-ui-line); background: var(--mh-ui-panel); color: var(--mh-text);
  font-size: .75rem; font-weight: 800; line-height: 1; pointer-events: none;
}
.mh-locked:hover > :not(.mh-lock-chip), .mh-locked:focus-visible > :not(.mh-lock-chip) { opacity: .8; }

/* ── Empty / error / loading states ────────────────────────────────── */
.mh-state { display: grid; justify-items: center; gap: .5rem; padding: 2.5rem 1rem; text-align: center; color: var(--mh-muted); }
.mh-state[hidden] { display: none; }
.mh-state__icon { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 14px; background: var(--mh-ui-raise); color: var(--mh-muted-strong, var(--mh-text)); }
.mh-state--error .mh-state__icon { color: var(--mh-ui-danger); }
.mh-state__title { margin: .25rem 0 0; font-size: 1.0625rem; font-weight: 800; color: var(--mh-text); }
.mh-state__body { margin: 0; max-width: 28rem; font-size: .9375rem; line-height: 1.5; }
.mh-state .mh-ui-btn { margin-top: .5rem; }
.mh-spinner-ring { width: 22px; height: 22px; border: 2.5px solid var(--mh-ui-line); border-top-color: var(--mh-ui-accent); border-radius: 50%; animation: mh-ui-spin .8s linear infinite; }
@keyframes mh-ui-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .mh-spinner-ring { animation-duration: 2.4s; } }

/* Device-specific copy: pointer (drag, paste, Ctrl+V) vs touch (camera, gallery) — B19. */
@media (hover: none) and (pointer: coarse) { .mh-only-pointer { display: none !important; } }
@media (hover: hover), (pointer: fine) { .mh-only-touch { display: none !important; } }

/* ── Voice summary player (B14) ────────────────────────────────────── */
.mh-voice__subject { margin: 0 0 .25rem; font-size: 1.0625rem; font-weight: 800; color: var(--mh-text); overflow-wrap: break-word; hyphens: none; }
.mh-voice__status { margin: 0 0 .75rem; font-size: .9375rem; line-height: 1.5; color: var(--mh-muted); }
.mh-voice__status[hidden] { display: none; }
.mh-voice__status[data-tone="error"] { color: var(--mh-ui-danger); }
.mh-voice__player { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; padding: .75rem; border: 1px solid var(--mh-ui-line); border-radius: 14px; background: var(--mh-ui-raise); }
.mh-voice__toggle { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: var(--mh-ui-tap); min-width: 7.5rem; padding: .5rem 1rem; border: 0; border-radius: 999px; background: var(--mh-ui-accent); color: var(--mh-ui-on-accent); font: inherit; font-size: .9375rem; font-weight: 700; cursor: pointer; }
.mh-voice__toggle[disabled] { opacity: .75; cursor: progress; }
.mh-voice__toggle:focus-visible { outline: 2px solid var(--mh-ui-accent); outline-offset: 2px; }
.mh-voice__toggle-icon { display: inline-flex; }
.mh-voice__toggle .mh-spinner-ring { width: 18px; height: 18px; border-color: color-mix(in srgb, var(--mh-ui-on-accent) 35%, transparent); border-top-color: var(--mh-ui-on-accent); }
.mh-voice__progress { flex: 1 1 8rem; min-width: 0; height: var(--mh-ui-tap); accent-color: var(--mh-ui-accent); cursor: pointer; }
.mh-voice__progress[disabled] { cursor: default; opacity: .5; }
.mh-voice__time { min-width: 5.5rem; font-size: .875rem; font-variant-numeric: tabular-nums; color: var(--mh-muted-strong, var(--mh-text)); text-align: end; direction: ltr; }
.mh-voice__caption { margin-top: .875rem; max-height: 40vh; overflow-y: auto; padding: .875rem 1rem; border-radius: 12px; border: 1px solid var(--mh-ui-line); font-size: 1rem; line-height: 1.65; color: var(--mh-text); white-space: pre-line; }
.mh-voice__caption[hidden] { display: none; }
.mh-lock-chip--static { position: static; pointer-events: auto; }
.mh-locked-inline { display: grid; justify-items: start; gap: .5rem; }

/* ── Line icons replacing emoji in signed-in UI (C8); markup: <i class=mhi-NAME aria-hidden=true></i> ── */
[class^="mhi-"] { display: inline-block; flex: none; width: 1.1em; height: 1.1em; vertical-align: -0.18em; background-color: currentColor; -webkit-mask: var(--mhi) center / contain no-repeat; mask: var(--mhi) center / contain no-repeat; }
.mhi-pill { --mhi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m10.5 20.5 10-10a4.95 4.95 0 1 0-7-7l-10 10a4.95 4.95 0 1 0 7 7Z'/%3E%3Cpath d='m8.5 8.5 7 7'/%3E%3C/svg%3E"); }
.mhi-alert { --mhi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.3 3.9 1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0z'/%3E%3Cpath d='M12 9v4'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E"); }
.mhi-ban { --mhi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m4.9 4.9 14.2 14.2'/%3E%3C/svg%3E"); }
.mhi-box { --mhi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 8a2 2 0 0 0-1-1.7l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.7l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16Z'/%3E%3Cpath d='m3.3 7 8.7 5 8.7-5'/%3E%3Cpath d='M12 22V12'/%3E%3C/svg%3E"); }
.mhi-clock { --mhi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 6v6l4 2'/%3E%3C/svg%3E"); }
.mhi-food { --mhi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 2v7c0 1.1.9 2 2 2h4a2 2 0 0 0 2-2V2'/%3E%3Cpath d='M7 2v20'/%3E%3Cpath d='M21 15V2a5 5 0 0 0-5 5v6c0 1.1.9 2 2 2h3Zm0 0v7'/%3E%3C/svg%3E"); }
.mhi-person { --mhi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M20 21a8 8 0 0 0-16 0'/%3E%3C/svg%3E"); }
.mhi-baby { --mhi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 12h.01'/%3E%3Cpath d='M15 12h.01'/%3E%3Cpath d='M10 16c.5.3 1.2.5 2 .5s1.5-.2 2-.5'/%3E%3Cpath d='M19 6.3a9 9 0 0 1 1.8 3.9 2 2 0 0 1 0 3.6 9 9 0 0 1-17.6 0 2 2 0 0 1 0-3.6A9 9 0 0 1 12 3c2 0 3.5 1.1 3.5 2.5s-.9 2.5-2 2.5c-.8 0-1.5-.4-1.5-1'/%3E%3C/svg%3E"); }
.mhi-heart { --mhi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 14c1.5-1.5 3-3.2 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.8 0-3 .5-4.5 2-1.5-1.5-2.7-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.1 3 5.5l7 7Z'/%3E%3C/svg%3E"); }
.mhi-list { --mhi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 6h13'/%3E%3Cpath d='M8 12h13'/%3E%3Cpath d='M8 18h13'/%3E%3Cpath d='M3 6h.01'/%3E%3Cpath d='M3 12h.01'/%3E%3Cpath d='M3 18h.01'/%3E%3C/svg%3E"); }
.mhi-book { --mhi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 19.5v-15A2.5 2.5 0 0 1 6.5 2H20v20H6.5a2.5 2.5 0 0 1 0-5H20'/%3E%3C/svg%3E"); }
.mhi-check { --mhi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); }
.mhi-shield { --mhi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/%3E%3C/svg%3E"); }
.mhi-spark { --mhi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l1.9 5.1L19 10l-5.1 1.9L12 17l-1.9-5.1L5 10l5.1-1.9z'/%3E%3C/svg%3E"); }
.mhi-flask { --mhi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 2v7.3'/%3E%3Cpath d='M14 9.3V2'/%3E%3Cpath d='M8.5 2h7'/%3E%3Cpath d='M14 9.3 19.7 19a2 2 0 0 1-1.7 3H6a2 2 0 0 1-1.7-3L10 9.3'/%3E%3C/svg%3E"); }
.mhi-leaf { --mhi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 20A7 7 0 0 1 9.8 6.1C15.5 5 17 4.5 19 2c1 2 2 4.2 2 8 0 5.5-4.8 10-10 10Z'/%3E%3Cpath d='M2 21c0-3 1.9-5.4 5.1-6'/%3E%3C/svg%3E"); }
.mhi-bulb { --mhi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 14c.2-1 .7-1.7 1.5-2.5 1-.9 1.5-2.2 1.5-3.5A6 6 0 0 0 6 8c0 1 .2 2.2 1.5 3.5.7.7 1.3 1.5 1.5 2.5'/%3E%3Cpath d='M9 18h6'/%3E%3Cpath d='M10 22h4'/%3E%3C/svg%3E"); }
.mhi-search { --mhi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E"); }
.mhi-info { --mhi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 16v-4'/%3E%3Cpath d='M12 8h.01'/%3E%3C/svg%3E"); }
.mhi-zap { --mhi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13 2 3 14h9l-1 8 10-12h-9l1-8z'/%3E%3C/svg%3E"); }
.mhi-steth { --mhi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.8 2.3A.3.3 0 1 0 5 2H4a2 2 0 0 0-2 2v5a6 6 0 0 0 6 6 6 6 0 0 0 6-6V4a2 2 0 0 0-2-2h-1a.2.2 0 1 0 .3.3'/%3E%3Cpath d='M8 15v1a6 6 0 0 0 6 6 6 6 0 0 0 6-6v-4'/%3E%3Ccircle cx='20' cy='10' r='2'/%3E%3C/svg%3E"); }
.mhi-gear { --mhi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M19.4 15a1.7 1.7 0 0 0 .3 1.8l.1.1a2 2 0 1 1-2.8 2.8l-.1-.1a1.7 1.7 0 0 0-1.8-.3 1.7 1.7 0 0 0-1 1.5V21a2 2 0 1 1-4 0v-.1a1.7 1.7 0 0 0-1.1-1.5 1.7 1.7 0 0 0-1.8.3l-.1.1a2 2 0 1 1-2.8-2.8l.1-.1a1.7 1.7 0 0 0 .3-1.8 1.7 1.7 0 0 0-1.5-1H3a2 2 0 1 1 0-4h.1a1.7 1.7 0 0 0 1.5-1.1 1.7 1.7 0 0 0-.3-1.8l-.1-.1a2 2 0 1 1 2.8-2.8l.1.1a1.7 1.7 0 0 0 1.8.3H9a1.7 1.7 0 0 0 1-1.5V3a2 2 0 1 1 4 0v.1a1.7 1.7 0 0 0 1 1.5 1.7 1.7 0 0 0 1.8-.3l.1-.1a2 2 0 1 1 2.8 2.8l-.1.1a1.7 1.7 0 0 0-.3 1.8V9a1.7 1.7 0 0 0 1.5 1H21a2 2 0 1 1 0 4h-.1a1.7 1.7 0 0 0-1.5 1z'/%3E%3C/svg%3E"); }
.mhi-note { --mhi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 2v6h6'/%3E%3Cpath d='M16 13H8'/%3E%3Cpath d='M16 17H8'/%3E%3C/svg%3E"); }
.mhi-building { --mhi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='2' width='16' height='20' rx='2'/%3E%3Cpath d='M9 22v-4h6v4'/%3E%3Cpath d='M8 6h.01'/%3E%3Cpath d='M16 6h.01'/%3E%3Cpath d='M12 6h.01'/%3E%3Cpath d='M12 10h.01'/%3E%3Cpath d='M12 14h.01'/%3E%3Cpath d='M16 10h.01'/%3E%3Cpath d='M16 14h.01'/%3E%3Cpath d='M8 10h.01'/%3E%3Cpath d='M8 14h.01'/%3E%3C/svg%3E"); }
.mhi-drop { --mhi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22a7 7 0 0 0 7-7c0-2-1-3.9-3-5.5s-3.5-4-4-6.5c-.5 2.5-2 4.9-4 6.5S5 13 5 15a7 7 0 0 0 7 7z'/%3E%3C/svg%3E"); }
.mhi-target { --mhi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Ccircle cx='12' cy='12' r='6'/%3E%3Ccircle cx='12' cy='12' r='2'/%3E%3C/svg%3E"); }
.mhi-chart { --mhi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 3v18h18'/%3E%3Cpath d='m19 9-5 5-4-4-3 3'/%3E%3C/svg%3E"); }
.mhi-bookmark { --mhi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m19 21-7-4-7 4V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v16z'/%3E%3C/svg%3E"); }
.mhi-globe { --mhi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M2 12h20'/%3E%3Cpath d='M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z'/%3E%3C/svg%3E"); }
.mhi-brain { --mhi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5a3 3 0 1 0-6 0 3 3 0 0 0-2 5 3 3 0 0 0 1 5 3 3 0 0 0 4 3 3 3 0 0 0 3-1V5z'/%3E%3Cpath d='M12 5a3 3 0 1 1 6 0 3 3 0 0 1 2 5 3 3 0 0 1-1 5 3 3 0 0 1-4 3 3 3 0 0 1-3-1'/%3E%3C/svg%3E"); }
.mhi-syringe { --mhi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m18 2 4 4'/%3E%3Cpath d='m17 7 3-3'/%3E%3Cpath d='M19 9 8.7 19.3a2.4 2.4 0 0 1-3.4 0l-.6-.6a2.4 2.4 0 0 1 0-3.4L15 5'/%3E%3Cpath d='m9 11 4 4'/%3E%3Cpath d='m5 19-3 3'/%3E%3Cpath d='m14 4 6 6'/%3E%3C/svg%3E"); }
.mhi-money { --mhi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='6' width='20' height='12' rx='2'/%3E%3Ccircle cx='12' cy='12' r='2'/%3E%3Cpath d='M6 12h.01M18 12h.01'/%3E%3C/svg%3E"); }
.mhi-camera { --mhi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.5 4h-5L7 7H4a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2h-3z'/%3E%3Ccircle cx='12' cy='13' r='3'/%3E%3C/svg%3E"); }
.mhi-copy { --mhi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='8' y='8' width='14' height='14' rx='2'/%3E%3Cpath d='M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2'/%3E%3C/svg%3E"); }
.mhi-repeat { --mhi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m17 2 4 4-4 4'/%3E%3Cpath d='M3 11v-1a4 4 0 0 1 4-4h14'/%3E%3Cpath d='m7 22-4-4 4-4'/%3E%3Cpath d='M21 13v1a4 4 0 0 1-4 4H3'/%3E%3C/svg%3E"); }
.mhi-share { --mhi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='18' cy='5' r='3'/%3E%3Ccircle cx='6' cy='12' r='3'/%3E%3Ccircle cx='18' cy='19' r='3'/%3E%3Cpath d='m8.6 13.5 6.8 4'/%3E%3Cpath d='m15.4 6.5-6.8 4'/%3E%3C/svg%3E"); }
.mhi-star { --mhi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2l3.1 6.3 6.9 1-5 4.9 1.2 6.9-6.2-3.3-6.2 3.3L7 14.2 2 9.3l6.9-1L12 2z'/%3E%3C/svg%3E"); }
.mhi-mic { --mhi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='2' width='6' height='12' rx='3'/%3E%3Cpath d='M5 10a7 7 0 0 0 14 0'/%3E%3Cpath d='M12 17v5'/%3E%3C/svg%3E"); }
.mhi-robot { --mhi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='11' width='18' height='10' rx='2'/%3E%3Ccircle cx='12' cy='5' r='2'/%3E%3Cpath d='M12 7v4'/%3E%3Cpath d='M8 16h.01'/%3E%3Cpath d='M16 16h.01'/%3E%3C/svg%3E"); }
.mhi-eye { --mhi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3-7 10-7 10 7 10 7-3 7-10 7S2 12 2 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E"); }
.mhi-thermo { --mhi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 4v10.5a4 4 0 1 1-4 0V4a2 2 0 0 1 4 0z'/%3E%3C/svg%3E"); }
.mhi-scale { --mhi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m16 16 3-8 3 8c-.9.7-1.9 1-3 1s-2.1-.3-3-1Z'/%3E%3Cpath d='m2 16 3-8 3 8c-.9.7-1.9 1-3 1s-2.1-.3-3-1Z'/%3E%3Cpath d='M7 21h10'/%3E%3Cpath d='M12 3v18'/%3E%3Cpath d='M3 7h2c2 0 5-1 7-2 2 1 5 2 7 2h2'/%3E%3C/svg%3E"); }
.mhi-calendar { --mhi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cpath d='M16 2v4'/%3E%3Cpath d='M8 2v4'/%3E%3Cpath d='M3 10h18'/%3E%3C/svg%3E"); }
.mhi-bell { --mhi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9'/%3E%3Cpath d='M10.3 21a1.9 1.9 0 0 0 3.4 0'/%3E%3C/svg%3E"); }
.mhi-lock { --mhi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='10' width='16' height='10' rx='2'/%3E%3Cpath d='M8 10V7a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E"); }
.mhi-folder { --mhi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20h16a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.7-.9l-.8-1.2A2 2 0 0 0 7.9 3H4a2 2 0 0 0-2 2v13c0 1.1.9 2 2 2Z'/%3E%3C/svg%3E"); }
.mhi-save { --mhi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z'/%3E%3Cpath d='M17 21v-8H7v8'/%3E%3Cpath d='M7 3v5h8'/%3E%3C/svg%3E"); }
.mhi-chat { --mhi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 11.5a8.4 8.4 0 0 1-12.4 7.4L3 21l2.1-5.4A8.5 8.5 0 1 1 21 11.5z'/%3E%3C/svg%3E"); }
.mhi-printer { --mhi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9V2h12v7'/%3E%3Cpath d='M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2'/%3E%3Crect x='6' y='14' width='12' height='8'/%3E%3C/svg%3E"); }
.mhi-image { --mhi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Ccircle cx='9' cy='9' r='2'/%3E%3Cpath d='m21 15-3.1-3.1a2 2 0 0 0-2.8 0L6 21'/%3E%3C/svg%3E"); }
.mhi-dot { --mhi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E"); }

/* ── Phones (N4, B16): the tool shells add no gutter of their own, and one card level only ── */
@media (max-width: 639.98px) {
  .ix-hero-section, .ix-workspace, .ix-details-content,
  .lab-page-shell, .lab-container, .rx-page-shell, .rx-container,
  .supp-container, .iv-container, .safe-container, .mp-shell, .mp-container, .info-shell, .tr-shell, .tr-container,
  .dr-controls, .gl-controls, .eo-controls, .cn-controls, .dr-content, .gl-content, .eo-content, .cn-content,
  .dr-details-content, .gl-details-content, .eo-details-content, .cn-details-content { padding-inline: 0 !important; }
  .dr-controls-inner, .gl-controls-inner, .eo-controls-inner, .cn-controls-inner { padding-inline: 0 !important; }
  /* Outer section boxes become plain sections (a rule above, no frame); their tiles stay the one card level. */
  .detail-container .section-card, .dr-indication-tile, .eo-treatment-card, .ix-hero-card, .lab-card-panel, .lab-test-card,
  .supp-overview-card, .supp-bento-tile, .supp-accordion-item, .iv-section-card, .iv-tile-list, .safe-bento-card, .safe-card {
    background: transparent !important; border: 0 !important; border-top: 1px solid var(--mh-ui-line) !important;
    border-radius: 0 !important; box-shadow: none !important; padding-inline: 0 !important;
    -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  }
}

/* ── C7 + C8: one primary button style on every signed-in tool page (solid accent, no gradient or
      glow); secondary buttons stay outlined. Page containers keep this scoped to signed-in tools. ── */
:is(.mh-main-content, .mh-patient-container, .detail-container, .dis-page, .ep-shell, [data-mh-dialog])
  :is(.mh-btn-primary, .dr-btn-primary, .gl-btn-primary, .eo-btn-primary, .cn-btn-primary, .ix-btn-primary,
      .lab-btn-primary, .rx-btn-primary, .rx-scan-btn, .supp-btn-primary, .safe-btn-primary, .mp-btn-primary,
      .tr-btn-primary, .iv-ai-btn, .gl-ai-btn, .cn-ai-btn, .ds-btn-primary, .mh-modal-btn-submit, .btn-action.primary) {
  background: var(--mh-ui-accent) !important; background-image: none !important; color: var(--mh-ui-on-accent) !important;
  border-color: transparent !important; box-shadow: none !important; text-shadow: none !important;
}
:is(.mh-main-content, .mh-patient-container, .detail-container, .dis-page, .ep-shell, [data-mh-dialog])
  :is(.mh-btn-primary, .dr-btn-primary, .gl-btn-primary, .eo-btn-primary, .cn-btn-primary, .ix-btn-primary,
      .lab-btn-primary, .rx-btn-primary, .rx-scan-btn, .supp-btn-primary, .safe-btn-primary, .mp-btn-primary,
      .tr-btn-primary, .iv-ai-btn, .gl-ai-btn, .cn-ai-btn, .ds-btn-primary, .mh-modal-btn-submit, .btn-action.primary):hover {
  filter: brightness(1.06); transform: none !important;
}
:is(.mh-main-content, .mh-patient-container, .detail-container) :is(.mh-modal-btn-submit.purple, .lab-btn-secondary) {
  background-image: none !important;
}

/* ── C6: touch targets >= 44px and text >= 12px on the signed-in tool pages ── */
:is(.info-chip, .mh-btn-action-icon, .dis-card-ai, .lab-btn-tool, .lab-btn, .mon-sev-chip, .mh-btn-action-primary,
    .ix-quick-tag, .pv-change, .pv-open, .ais-safety-tab, .ais-brands-tab, .btn-action, .iv-ref-link, .mh-wa-btn,
    .gl-ref-link, .lab-ref-link, .info-lang-toggle, .info-copy-btn, .ix-scope-btn, .safety-tab, .dose-count,
    .ds-recent-chip, .cross-sell-card, .trade-card) {
  min-height: 44px;
}
:is(.mh-btn-action-icon, .mh-wa-btn) { min-width: 44px; }
:is(.gl-ref-link, .lab-ref-link, .iv-ref-link, .pv-change) { display: inline-flex; align-items: center; }
.mon-ddi-search { min-height: 44px; }
:is(.mh-chip, .trade-card-country, .trade-widget-note, .cross-sell-category, .mon-kinetics-label, .mon-ddi-count,
    .mon-sev-badge, .mon-food-action-badge, .ais-list-sub, .ais-brand-sub, .dis-category, .dis-section-label,
    .dr-badge-pill, .dr-tile-instruction-label, .dr-fact-label, .gl-badge-pill, .supp-evidence-pill, .iv-ref-tag,
    .safe-badge-lbl, .safe-cat-tag, .safe-organ-tag, .info-card-badge, .tr-pdf-badge, .ep-mini dt, .eo-badge,
    .cn-badge, .ix-sev-badge, .ix-origin-tag, .lab-badge, .mp-chip, .dh-badge) {
  font-size: max(12px, .75em) !important;
}

/* ── Per-section translate button (js/mh-translate.js, owner decision 4) ── */
.mh-tr-btn { display: inline-flex; align-items: center; gap: .3rem; min-height: 32px; margin-inline-start: .5rem; padding: .2rem .6rem; border: 1px solid var(--mh-ui-line); border-radius: 999px; background: var(--mh-ui-raise); color: var(--mh-muted-strong, var(--mh-text)); font: inherit; font-size: .75rem; font-weight: 700; line-height: 1; vertical-align: middle; cursor: pointer; white-space: nowrap; }
.mh-tr-btn:hover { border-color: var(--mh-ui-accent); color: var(--mh-text); }
.mh-tr-btn:focus-visible { outline: 2px solid var(--mh-ui-accent); outline-offset: 2px; }
.mh-tr-btn[aria-pressed="true"] { border-color: var(--mh-ui-accent); background: color-mix(in srgb, var(--mh-ui-accent) 12%, transparent); }
.mh-tr-btn[aria-busy="true"] { cursor: progress; }
.mh-tr-btn--locked { opacity: .85; }
.mh-tr-btn .mh-tr-spin { width: 14px; height: 14px; border-width: 2px; }
.mh-tr-slot { display: flex; justify-content: flex-end; }
.mh-tr-slot--after { display: inline-flex; }
.mh-tr-note { margin: .25rem 0 .5rem; font-size: .75rem; color: var(--mh-muted); }
.mh-tr-status:empty, .mh-tr-status[hidden] { display: none; }
.mh-state--compact { padding: .5rem .75rem; gap: .25rem; }
.mh-state--compact .mh-state__icon { width: 28px; height: 28px; border-radius: 8px; }
.mh-state--compact .mh-state__title { font-size: .875rem; font-weight: 700; }
.mh-tr-translated[dir="rtl"] { text-align: start; }
@media (max-width: 480px) { .mh-tr-btn__text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .mh-tr-btn { min-width: 36px; min-height: 36px; justify-content: center; } }

/* ── Background AI job page and "My AI requests" (ai_jobs/result.html, ai_jobs/list.html) ── */
.mh-ai-job__spinner { margin: 0 auto .5rem; }
.mh-ai-job__spinner[hidden], .mh-ai-job__progress[hidden] { display: none; }
.mh-ai-job__elapsed { margin-top: .35rem; font-size: .8125rem; color: var(--mh-muted); font-variant-numeric: tabular-nums; }
.mh-ai-job__progress { position: relative; height: 4px; margin-top: .875rem; overflow: hidden; border-radius: 999px; background: var(--mh-ui-line); }
.mh-ai-job__progress span { position: absolute; inset-block: 0; inset-inline-start: -40%; width: 40%; border-radius: inherit; background: var(--mh-ui-accent); animation: mh-ai-job-slide 1.6s ease-in-out infinite; }
@keyframes mh-ai-job-slide { to { inset-inline-start: 100%; } }
@media (prefers-reduced-motion: reduce) { .mh-ai-job__progress span { animation-duration: 4s; } }
.mh-ai-job__notify { margin-top: 1rem; display: grid; justify-items: start; gap: .5rem; }
.mh-ai-job__notify[hidden], .mh-ai-job__notify-note[hidden] { display: none; }
.mh-ai-job__notify-note { margin: 0; font-size: .875rem; color: var(--mh-muted); }
.mh-ai-job__more { margin-top: 1.5rem; }
.mh-ai-job__lede { margin: -.5rem 0 1.25rem; color: var(--mh-muted); }
.mh-ai-jobs { display: grid; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.mh-ai-jobs__row { display: flex; align-items: center; justify-content: space-between; gap: .75rem; min-height: var(--mh-ui-tap, 44px); padding: .75rem 1rem; border: 1px solid var(--mh-ui-line); border-radius: 12px; background: var(--mh-ui-raise); color: var(--mh-text); text-decoration: none; }
.mh-ai-jobs__row:hover { border-color: var(--mh-ui-accent); }
.mh-ai-jobs__text { display: grid; gap: .15rem; min-width: 0; }
.mh-ai-jobs__kind { font-weight: 700; }
.mh-ai-jobs__time { font-size: .8125rem; color: var(--mh-muted); }
.mh-ai-jobs__status { flex: none; padding: .2rem .6rem; border-radius: 999px; font-size: .75rem; font-weight: 800; background: var(--mh-ui-panel, transparent); border: 1px solid var(--mh-ui-line); }
.mh-ai-jobs__status--succeeded { color: var(--mh-ui-success); border-color: color-mix(in srgb, var(--mh-ui-success) 45%, transparent); }
.mh-ai-jobs__status--failed { color: var(--mh-ui-danger); border-color: color-mix(in srgb, var(--mh-ui-danger) 45%, transparent); }
.mh-ai-jobs__status--running, .mh-ai-jobs__status--queued { color: var(--mh-ui-accent); }