/* MEDA-584 design-system foundations — OPT-IN, NAMESPACED adapter. Not loaded by any product page.
   Nothing here applies outside an element carrying .mds-scope; there is no :root rule and no theme of its own:
   theme/state authority stays with the existing --bk-* tokens (book.css) and font/geometry with --mb-* (telemed.css).
   Tier 1 (--mds-src-*) = values OBSERVED in Figma file 9iudKtviXwHZQPuX2zr7XR (node ids in docs/design-system/foundations.json).
   Tier 2 (--mds-*)     = deliberate WEB semantic choices; each says what it adapts. Source placeholder #D6D6D6 and white-on-brand-green are
   NOT used as accessible semantics. Blue is a component-level accent proposal, not a global recolor; purple is unmeasured and absent. */

.mds-scope {
  /* tier 1 — observed primitives */
  --mds-src-blue: #345bb8;            /* 12559:35569 BrandBlue; Cancel text colour */
  --mds-src-search-fill: #f3f3f3;     /* 12559:37836 search surface */
  --mds-src-placeholder: #d6d6d6;     /* 12559:37836 placeholder (low contrast: documentation only) */
  --mds-src-typed: #323232;           /* 12559:37838 typed text */
  --mds-src-cursor: #5073c1;          /* 12559:37837 caret */
  --mds-src-search-w: 343px;
  --mds-src-search-h: 40px;
  --mds-src-search-r: 10px;
  --mds-src-search-text: 14px;
  --mds-src-search-line: 24px;
  --mds-src-icon: 24px;               /* 12559:32533 */
  --mds-src-type-14: 14px; --mds-src-type-14-line: 20px;   /* 12559:37799 */
  --mds-src-type-16: 16px; --mds-src-type-16-line: 24px;   /* 12559:37800 */
  --mds-src-type-20: 20px; --mds-src-type-20-line: 28px;   /* 12559:37801 */
  --mds-src-type-24: 24px; --mds-src-type-24-line: 32px;   /* 12559:37802 */
  --mds-src-type-30: 30px; --mds-src-type-30-line: 36px;   /* 12559:37803 */
  --mds-src-type-36: 36px; --mds-src-type-36-line: 48px;   /* 12559:37804 */
  --mds-src-type-42: 42px; --mds-src-type-42-line: 50px;   /* 12559:37805 */
  --mds-src-type-60: 60px; --mds-src-type-60-line: 72px;   /* 12559:37806 */

  /* tier 2 — web semantic adapter (fallbacks only matter if a page lacks book.css/telemed.css) */
  --mds-font: var(--mb-font-display, "SF Pro Display", system-ui, sans-serif);
  --mds-target: 48px;                 /* web touch target; source is 40 */
  --mds-text: var(--mds-src-type-16); --mds-text-line: var(--mds-src-type-16-line);   /* readable-web, source is 14 */
  --mds-radius: var(--mb-r-tile, var(--mds-src-search-r));
  --mds-field-bg: var(--bk-field, #fff);
  --mds-field-ink: var(--bk-fg, #1b2621);
  --mds-field-placeholder: var(--bk-muted, #4d5b54);
  --mds-field-border: var(--bk-border, #74837a);
  --mds-focus: var(--bk-focus, #1b2621);
  --mds-action-ink: var(--bk-link, #0b6b3d);
  --mds-action-border: var(--bk-link, #0b6b3d);
  --mds-caret: var(--mds-field-ink);
  --mds-accent-blue-fill: var(--mds-src-blue);
  --mds-accent-blue-ink: #fff;
  font-family: var(--mds-font);
}

/* ---- component: search field (gallery markup; also applies to an existing labelled text input) ---- */
.mds-scope .mds-search { display: grid; gap: 8px; min-width: 0; }
.mds-scope .mds-search__label { font: 500 var(--mds-text)/var(--mds-text-line) var(--mds-font); color: var(--mds-field-ink); overflow-wrap: anywhere; }
.mds-scope .mds-search__control {
  display: flex; align-items: center; gap: 8px; min-width: 0; min-height: var(--mds-target); padding: 0 12px;
  background: var(--mds-field-bg); border: 1px solid var(--mds-field-border); border-radius: var(--mds-radius);
}
.mds-scope .mds-search__control:focus-within { outline: 3px solid var(--mds-focus); outline-offset: 2px; }
.mds-scope .mds-search__icon { flex: none; width: var(--mds-src-icon); height: var(--mds-src-icon); }
.mds-scope .mds-search__input {
  flex: 1; min-width: 0; width: 100%; height: calc(var(--mds-target) - 2px); padding: 0; border: 0; border-radius: 0; outline: 0;
  background: transparent; color: var(--mds-field-ink); caret-color: var(--mds-caret);
  font: 500 var(--mds-text)/var(--mds-text-line) var(--mds-font); letter-spacing: 0;
}
.mds-scope .mds-search__input::placeholder { color: var(--mds-field-placeholder); opacity: 1; }

/* ---- component: secondary action button (outlined; blue variant is an opt-in proposal) ---- */
.mds-scope .mds-action {
  display: inline-flex; align-items: center; justify-content: center; width: 100%; min-height: var(--mds-target); padding: 10px 16px;
  border: 1px solid var(--mds-action-border); border-radius: 8px; background: transparent; color: var(--mds-action-ink);
  font: 500 var(--mds-text)/var(--mds-text-line) var(--mds-font); white-space: normal; overflow-wrap: anywhere; cursor: pointer;
}
.mds-scope .mds-action:focus-visible { outline: 3px solid var(--mds-focus); outline-offset: 2px; }
.mds-scope[data-mds-accent="blue"] .mds-action {
  background: var(--mds-accent-blue-fill); color: var(--mds-accent-blue-ink); border-color: var(--mds-field-border);
}

/* ---- adapter for the EXISTING catalog markup (#searchName), exercised only by harness injection. Doubled .mds-scope raises specificity above book.css
   body[data-page="doctors"] input[type=text] (0,2,2); that existing rule is otherwise 44px/16px and already uses --bk-*. ---- */
.mds-scope.mds-scope input[type=text] {
  height: var(--mds-target); padding: 0 12px; border: 1px solid var(--mds-field-border); border-radius: var(--mds-radius);
  background: var(--mds-field-bg); color: var(--mds-field-ink); caret-color: var(--mds-caret);
  font: 500 var(--mds-text)/var(--mds-text-line) var(--mds-font); letter-spacing: 0;
}
.mds-scope.mds-scope input[type=text]::placeholder { color: var(--mds-field-placeholder); opacity: 1; }
.mds-scope.mds-scope input[type=text]:focus-visible { outline: 3px solid var(--mds-focus); outline-offset: 2px; }