/* TELEMED-DEMO-001 — Medbook design-language styles.
   Source: Figma file 9iudKtviXwHZQPuX2zr7XR via official Figma MCP read-only
   extraction (/evaluator/figma/figma-source-bundle, 2026-10-23T13:11Z).
   Source nodes: Button/def 12559:37957, Doctor view active 5351:4698,
   Home Screen 1 4163:9061. Cover 10766:3295 is a cover page only.
   No telemedicine call frame exists in the extracted source: call-specific
   surfaces (video stage, controls, ring, reconnect) are ADAPTATIONS built from
   these tokens/components, not 1:1 frames. Mapping: DESIGN-SOURCE-MAP.json. */
:root {
  /* named Figma styles (variables-context.json, home-context.json) */
  --mb-accent-main: #21B46D;      /* light_accentMain        12559:37957 */
  --mb-accent-tint2: #7AD2A7;     /* light_accentTint2       12559:37957 */
  --mb-white: #FFFFFF;            /* White/100%              12559:37957 */
  --mb-grey: #888888;             /* Main Grey/Deafult       4163:9061  */
  --mb-error: #E0352C;            /* Error Red/deafult       4163:9061  */
  --mb-label: #000000;            /* Label Color/Light/Primary 4163:9061 */
  /* observed literal values in 4163:9061 / 5351:4698 (not named styles) */
  --mb-ink: #323232;              /* header "Hello!", tab label active */
  --mb-heading: #303639;          /* section titles "Categories" */
  --mb-secondary: #898A8D;        /* "50 Doctors", inactive tab label */
  --mb-meta: #8F9596;             /* "SEE ALL", "Yerevan" */
  --mb-surface: #F3F3F3;          /* search box 4163:9246 */
  --mb-placeholder: #C3C9C9;      /* "Search" placeholder 4163:9250 */
  --mb-media-slot: #C4C4C4;       /* image slot fill under hospital photos 4163:9160 */
  --mb-tile-border: rgba(52, 91, 184, 0.08);  /* category card Mask 4163:9069 */
  --mb-card-inactive: rgba(33, 180, 109, 0.5); /* doctor card inactive variant 5351:4699 */
  --mb-card-text-2: rgba(255, 255, 255, 0.8);  /* doctor card secondary text 5351:4705 */
  --mb-nav-bg: rgba(255, 255, 255, 0.6);       /* nav_menu 4163:9280 */
  --mb-nav-blur: 4.077px;
  --mb-nav-shadow: 4px 4px 16px 0 rgba(31, 152, 94, 0.16);
  /* geometry */
  --mb-inset: 16px;               /* content inset / doctor card padding+gap */
  --mb-btn-h: 48px;               /* Button/def height */
  --mb-btn-w: 343px;              /* Button/def width (= 375 - 2*16) */
  --mb-r-btn: 8px;                /* Button/def base radius */
  --mb-r-card: 8px;               /* Doctor view radius */
  --mb-r-tile: 10px;              /* category card / search radius */
  --mb-r-media: 12px;             /* hospital image slot radius */
  --mb-r-nav: 16px;               /* nav_menu radius */
  /* typography: SF Pro is NOT bundled (no font binaries supplied, none
     downloaded). Apple platforms resolve it via -apple-system; elsewhere the
     system UI font is an honest fallback, not a fidelity claim. */
  --mb-font-text: "SF Pro Text", -apple-system, BlinkMacSystemFont, system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mb-font-display: "SF Pro Display", -apple-system, BlinkMacSystemFont, system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { font: 400 16px/1.4 var(--mb-font-text); letter-spacing: 0.2px; color: var(--mb-ink);
  background: var(--mb-white); padding-bottom: env(safe-area-inset-bottom); -webkit-font-smoothing: antialiased; }
code { font: 600 13px/1 var(--mb-font-text); letter-spacing: 0; }

/* top strip: generic preview marker kept until real backend + cross-network acceptance */
.bar { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: center; justify-content: space-between;
  padding: 12px var(--mb-inset); background: var(--mb-white); }
.brand { font: 600 17px/normal var(--mb-font-text); letter-spacing: 0.2px; color: var(--mb-accent-main); }
.tag { font: 500 10px/normal var(--mb-font-text); letter-spacing: 0.1818px; color: var(--mb-meta); text-transform: uppercase; }
.banner { margin: 0 var(--mb-inset) 8px; padding: 10px 12px; border-radius: var(--mb-r-tile);
  font: 600 14px/20px var(--mb-font-text); text-align: center; background: var(--mb-surface); }
.banner.warn { color: var(--mb-heading); }
.banner.err { color: var(--mb-error); display: flex; gap: 8px; align-items: center; justify-content: center; }
.banner.err::before { content: ""; width: 15.3333px; height: 11px; flex: none;
  background: url(assets/home-context-imgWifi.svg) center / 15.3333px 11px no-repeat; }

main { width: 100%; max-width: 560px; margin: 0 auto; padding: 8px var(--mb-inset) 24px;
  display: grid; gap: var(--mb-inset); }
body[data-state="connecting"] main, body[data-state="connected"] main, body[data-state="reconnecting"] main { max-width: 960px; }

/* header — Home Screen 1 "header" group 4163:9251 */
.status { display: grid; gap: var(--mb-inset); }
.hello h1 { margin: 0; font: 300 32px/normal var(--mb-font-text); letter-spacing: 0.2186px; color: var(--mb-ink); }
#statusText { margin: 4px 0 0; font: 400 16px/normal var(--mb-font-text); letter-spacing: 0.2186px; color: var(--mb-ink); }

/* call card — Doctor view active 5351:4698 (active) / 5351:4699 (inactive) */
.call-card { display: flex; flex-direction: column; gap: var(--mb-inset); padding: var(--mb-inset);
  border-radius: var(--mb-r-card); background: var(--mb-accent-main); color: var(--mb-white); }
body[data-state="rejected"] .call-card, body[data-state="expired"] .call-card, body[data-state="cancelled"] .call-card,
body[data-state="ended"] .call-card, body[data-state="incomplete"] .call-card { background: var(--mb-card-inactive); }
.cc-top { display: flex; gap: var(--mb-inset); align-items: flex-start; justify-content: space-between; }
.cc-title { margin: 0; max-width: 195px; font: 700 19px/24px var(--mb-font-display); letter-spacing: 0; }
.cc-badge { flex: none; }
.cc-badge > span { display: flex; flex-direction: column; align-items: flex-end; gap: 4px;
  font: 600 16px/27px var(--mb-font-display); letter-spacing: 0; color: var(--mb-card-text-2); text-align: right; }
.cc-badge img { display: block; width: 16px; height: 16px; }
.cc-sub { margin: 0; font: 600 17px/normal var(--mb-font-display); letter-spacing: 0; }
.call-card .meta { display: flex; flex-wrap: wrap; gap: 0 10px; justify-content: space-between; margin: 0;
  font: 600 16px/27px var(--mb-font-display); letter-spacing: 0; color: var(--mb-card-text-2); word-break: break-all; }
.call-card code { color: var(--mb-white); }
/* badge variant follows device state: ShieldCheck = recording off / devices ok;
   ShieldSlash = devices blocked or released (adaptation of 5351:4704/4715) */
.cc-badge .when-blocked, .cc-badge .when-released { display: none; }
body[data-media="denied"] .cc-badge .when-ok, body[data-media="unavailable"] .cc-badge .when-ok,
body[data-media="insecure_context"] .cc-badge .when-ok, body[data-media="error"] .cc-badge .when-ok,
body[data-media="released"] .cc-badge .when-ok { display: none; }
body[data-media="denied"] .cc-badge .when-blocked, body[data-media="unavailable"] .cc-badge .when-blocked,
body[data-media="insecure_context"] .cc-badge .when-blocked, body[data-media="error"] .cc-badge .when-blocked { display: flex; }
body[data-media="released"] .cc-badge .when-released { display: flex; }

/* setup cards — category card "Mask" 4163:9069 */
.card { background: var(--mb-white); border: 1px solid var(--mb-tile-border); border-radius: var(--mb-r-tile); padding: var(--mb-inset); }
h2 { margin: 0 0 8px; font: 600 17px/normal var(--mb-font-text); letter-spacing: 0.2px; color: var(--mb-heading); }
.card p { margin: 0 0 8px; }
.help { color: var(--mb-secondary); font: 400 14px/20px var(--mb-font-text); letter-spacing: 0.2px; }
#mediaStatus { font: 500 14px/20px var(--mb-font-text); color: var(--mb-ink); }
body[data-media="denied"] #mediaStatus, body[data-media="unavailable"] #mediaStatus,
body[data-media="insecure_context"] #mediaStatus, body[data-media="error"] #mediaStatus { color: var(--mb-error); }
.media-denied { color: var(--mb-error); }

/* buttons — Button/def 12559:37957: 48px, radius 8, SF Pro Display Semibold 16 white;
   "Main Button Active" #21B46D, "Main Button Inactive" #7AD2A7 (mapped to :disabled) */
.row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
button { min-height: var(--mb-btn-h); min-width: var(--mb-btn-h); padding: 0 16px; flex: 1 1 auto;
  border-radius: var(--mb-r-btn); font: 600 16px/normal var(--mb-font-display); letter-spacing: 0; text-align: center;
  cursor: pointer; touch-action: manipulation;
  /* secondary: ADAPTATION (no secondary variant extracted) — same geometry, accent outline */
  background: var(--mb-white); color: var(--mb-accent-main); border: 1px solid var(--mb-accent-main); }
button.primary, button.ok { flex-basis: 100%; max-width: 100%; background: var(--mb-accent-main); border-color: var(--mb-accent-main); color: var(--mb-white); }
/* destructive: ADAPTATION — Button/def geometry with Error Red/deafult fill */
button.danger { background: var(--mb-error); border-color: var(--mb-error); color: var(--mb-white); }
button:disabled { cursor: not-allowed; background: var(--mb-white); color: var(--mb-accent-tint2); border-color: var(--mb-accent-tint2); }
button.primary:disabled, button.ok:disabled { background: var(--mb-accent-tint2); border-color: var(--mb-accent-tint2); color: var(--mb-white); }
button.danger:disabled { opacity: 0.5; background: var(--mb-error); color: var(--mb-white); }
button:focus-visible, input:focus-visible, summary:focus-visible, a:focus-visible { outline: 2px solid var(--mb-heading); outline-offset: 2px; }
.ring .row { justify-content: center; }

/* inputs — search box 4163:9245: #F3F3F3, radius 10, 40px, 14px text */
input[type=text] { width: 100%; height: 40px; padding: 0 12px; border: 0; border-radius: var(--mb-r-tile);
  background: var(--mb-surface); color: var(--mb-ink); font: 400 14px/normal var(--mb-font-text); letter-spacing: 0.2186px; }
input[type=text]::placeholder { color: var(--mb-placeholder); }
label.help { display: block; margin: 8px 0 4px; }

.notice { margin: 0; padding: 10px 12px; border-radius: var(--mb-r-tile); background: var(--mb-surface);
  font: 500 14px/20px var(--mb-font-text); color: var(--mb-ink); }

/* video stage — ADAPTATION of image slot 4163:9160 (radius 12, #C4C4C4 fill);
   Profile icon 4163:9310 shown while no remote video has arrived. */
.stage { position: relative; overflow: hidden; aspect-ratio: 4 / 3; max-height: 70vh; border-radius: var(--mb-r-media);
  background: var(--mb-media-slot) url(assets/home-context-imgProfile.svg) center / 54px 60px no-repeat; }
#remoteVideo { display: block; width: 100%; height: 100%; object-fit: cover; background: transparent; }
#localVideo { position: absolute; right: 12px; bottom: 12px; width: 28%; max-width: 180px; aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: var(--mb-r-card); border: 2px solid var(--mb-white); background: var(--mb-media-slot); transform: scaleX(-1); }
/* overlays use the nav_menu frosted surface 4163:9280 */
.overlay, #localBadge { background: rgba(255, 255, 255, 0.9); color: var(--mb-ink);
  -webkit-backdrop-filter: blur(var(--mb-nav-blur)); backdrop-filter: blur(var(--mb-nav-blur));
  box-shadow: var(--mb-nav-shadow); font: 600 14px/20px var(--mb-font-text); }
.overlay { position: absolute; left: 12px; right: 12px; top: 12px; padding: 10px 12px; border-radius: var(--mb-r-nav);
  display: flex; gap: 8px; align-items: center; justify-content: center; text-align: center; }
body[data-state="reconnecting"] .overlay { color: var(--mb-error); }
body[data-state="reconnecting"] .overlay::before { content: ""; width: 15.3333px; height: 11px; flex: none;
  background: url(assets/home-context-imgWifi.svg) center / 15.3333px 11px no-repeat; }
#localBadge { position: absolute; left: 12px; bottom: 12px; padding: 4px 10px; border-radius: var(--mb-r-btn); font-size: 13px; }
#localBadge:empty { display: none; }
body[data-state="reconnecting"] .stage { outline: 3px solid var(--mb-error); outline-offset: -3px; }

/* call controls — ADAPTATION of floating nav_menu 4163:9280 (inset 16, radius 16, blur, green shadow) */
.controls { position: sticky; bottom: calc(8px + env(safe-area-inset-bottom)); z-index: 2;
  display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; padding: 8px;
  border-radius: var(--mb-r-nav); background: var(--mb-nav-bg); box-shadow: var(--mb-nav-shadow);
  -webkit-backdrop-filter: blur(var(--mb-nav-blur)); backdrop-filter: blur(var(--mb-nav-blur)); }
.controls button { flex: 1 1 0; }
/* toggled-off control reads as the "Main Button Inactive" tint */
button[aria-pressed="true"] { background: var(--mb-accent-tint2); border-color: var(--mb-accent-tint2); color: var(--mb-white); }

/* ringing — ADAPTATION: notification bell Group1 4163:9254 (incl. its red dot)
   centred in a surface disc with an accent pulse */
.ring { text-align: center; }
.ring .pulse { display: grid; place-items: center; width: 88px; height: 88px; margin: 8px auto var(--mb-inset); border-radius: 50%;
  background: var(--mb-surface); animation: mb-pulse 1.2s ease-out infinite; }
.ring .pulse img { display: block; width: 22.385px; height: 23.4413px; }
.ring > p { font: 600 17px/normal var(--mb-font-text); color: var(--mb-heading); }
@keyframes mb-pulse { 0% { box-shadow: 0 0 0 0 rgba(33, 180, 109, 0.6); } 100% { box-shadow: 0 0 0 28px rgba(33, 180, 109, 0); } }
@media (prefers-reduced-motion: reduce) { .ring .pulse { animation: none; box-shadow: 0 0 0 4px var(--mb-accent-tint2); } }

.outcome { font: 600 17px/normal var(--mb-font-text) !important; letter-spacing: 0.2px; color: var(--mb-heading); }

/* diagnostics */
details summary { cursor: pointer; min-height: var(--mb-btn-h); display: flex; align-items: center;
  font: 600 17px/normal var(--mb-font-text); letter-spacing: 0.2px; color: var(--mb-heading); }
#timeline { font: 12px/1.35 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--mb-ink); max-height: 240px; overflow: auto; padding-left: 1.2rem; }
#stats { font: 12px/1.35 ui-monospace, SFMono-Regular, Menlo, monospace; white-space: pre-wrap; background: var(--mb-surface);
  padding: 8px 12px; border-radius: var(--mb-r-tile); }

/* index — entry tiles reuse category card 4163:9069 (white, 1px tint border, radius 10, 56px icon slot) */
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.see-all { font: 500 10px/normal var(--mb-font-text); letter-spacing: 0.1818px; color: var(--mb-meta); text-transform: uppercase; }
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(155px, 1fr)); gap: var(--mb-inset); }
.tile { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: var(--mb-inset); min-height: 150px;
  border: 1px solid var(--mb-tile-border); border-radius: var(--mb-r-tile); background: var(--mb-white); color: inherit; text-decoration: none; }
.tile .icon { width: 56px; height: 56px; display: grid; place-items: center; margin-bottom: auto; }
.tile .icon img { display: block; }
.tile-title { font: 600 16px/normal var(--mb-font-text); letter-spacing: 0.2px; color: var(--mb-ink); }
.tile-sub { font: 400 14px/normal var(--mb-font-text); color: var(--mb-secondary); }
.grid { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.grid a { display: flex; align-items: center; min-height: 40px; padding: 8px 12px; border-radius: var(--mb-r-tile);
  background: var(--mb-surface); color: var(--mb-accent-main); font: 500 14px/normal var(--mb-font-text); text-decoration: none; }

/* FEAT-1 readiness check (adaptation from existing tokens, no Figma frame) */
.checks { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 8px; }
.check { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; }
.check .mark { flex: none; min-width: 48px; padding: 2px 6px; border-radius: var(--mb-r-btn); text-align: center;
  font: 600 12px/18px var(--mb-font-text); color: var(--mb-white); background: var(--mb-accent-main); }
.check.warn .mark { background: var(--mb-grey); }
.check.fail .mark { background: var(--mb-error); }
.check .help { flex-basis: 100%; margin: 0 0 0 58px; }
.verdict { font-weight: 600; color: var(--mb-accent-main); }
.verdict.limited { color: var(--mb-heading); }
.verdict.not_ready { color: var(--mb-error); }
.precheck-preview { overflow: hidden; aspect-ratio: 4 / 3; max-height: 50vh; margin-bottom: 8px;
  border-radius: var(--mb-r-media); background: var(--mb-media-slot); }
.precheck-preview video { display: block; width: 100%; height: 100%; object-fit: cover; transform: scaleX(-1); }

/* FEAT-2 synthetic doctor directory (adaptation from existing tokens, no Figma frame) */
select { width: 100%; height: 40px; padding: 0 8px; border: 0; border-radius: var(--mb-r-tile);
  background: var(--mb-surface); color: var(--mb-ink); font: 400 15px/normal var(--mb-font-text); }
.filters { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 8px; }
#resultSummary { margin: 0; }
#resultSummary.empty { color: var(--mb-heading); font-weight: 600; }
.doctors { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.doctor { display: grid; gap: 4px; padding: var(--mb-inset); border-radius: var(--mb-r-card);
  background: var(--mb-accent-main); color: var(--mb-white); }
.doctor p { margin: 0; }
.doc-top { display: flex; gap: 8px; align-items: baseline; justify-content: space-between; }
.doc-name { margin: 0; font: 700 17px/22px var(--mb-font-display); }
.doc-badge { flex: none; padding: 1px 6px; border-radius: var(--mb-r-btn); background: var(--mb-white);
  color: var(--mb-accent-main); font: 600 11px/16px var(--mb-font-text); text-transform: uppercase; }
.doc-specialty { font: 600 15px/20px var(--mb-font-text); }
.doc-langs { color: var(--mb-card-text-2); font: 400 14px/20px var(--mb-font-text); }
.doc-formats { display: flex; flex-wrap: wrap; gap: 6px; }
.doc-format { padding: 2px 8px; border: 1px solid var(--mb-card-text-2); border-radius: var(--mb-r-btn); font: 500 12px/18px var(--mb-font-text); }

.doc-book { justify-self: start; margin-top: 4px; padding: 10px 14px; border-radius: var(--mb-r-btn); background: var(--mb-white);
  color: #0b6b3d; font: 600 15px/20px var(--mb-font-text); text-decoration: none; }

[hidden] { display: none !important; }
@media (min-width: 521px) {
  /* desktop/tablet: secondary actions sit beside each other, primary keeps Button/def max width */
  button.primary, button.ok { flex-basis: auto; min-width: min(100%, var(--mb-btn-w)); }
}
@media (max-width: 520px) {
  .stage { aspect-ratio: 3 / 4; }
  .controls button { flex: 1 1 30%; padding: 0 8px; font-size: 15px; }
}
@media (orientation: landscape) and (max-height: 520px) {
  .stage { aspect-ratio: 16 / 9; max-height: 80vh; }
}