/* 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.
   MED103-VISUAL-POLISH-02 (owner feedback 2026-10-23): calm white/light-neutral
   surfaces and graphite text; Medbook green only for primary actions and the
   connected status; muted violet (owner-directed, NOT in the Figma source) for
   small secondary accents. Mapping/contrast: DESIGN-POLISH-RESULT.json. */
:root {
  /* named Figma styles (variables-context.json, home-context.json) */
  --mb-primary-fill: #157A4A; /* Accessibility adaptation: white label contrast >=4.5; brand token retained. */
  --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 (icons/large only: 3.45:1) */
  --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-nav-blur: 4.077px;         /* nav_menu 4163:9280 */
  /* ADAPTATIONS (polish-02): accessible neutral/error text shades derived from
     the Figma greys/Error Red; violet set is owner-directed (no Figma source) */
  --mb-text-2: #5F6467;           /* secondary text, 5.99:1 on white */
  --mb-line: #E6E6E9;             /* neutral card/tile border (replaces blue-tinted 4163:9069 mask) */
  --mb-error-text: #C42B23;       /* error text / destructive fill, 5.65:1 with white */
  --mb-connected-text: #157A4A;   /* connected status text (darkened accentMain), 5.36:1 */
  --mb-violet: #5E4C8C;           /* muted violet: secondary label/focus, 7.27:1 */
  --mb-violet-line: #8E80B5;      /* secondary button outline, 3.56:1 (non-text >= 3) */
  --mb-violet-chip: #6E5A9E;      /* small "Recording off" chip fill, white 5.80:1 */
  --mb-violet-tint: #EEE9F6;      /* pressed toggle / ring disc */
  --mb-violet-hover: #F5F2FA;
  --mb-disabled-bg: #F6F6F7;
  --mb-disabled-text: #8A8A90;    /* 3.18:1 — disabled controls are WCAG-exempt */
  --mb-shadow: 0 4px 16px 0 rgba(50, 50, 50, 0.10); /* neutral form of nav_menu shadow */
  /* 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: 500 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); border-bottom: 1px solid var(--mb-line); }
/* brand: graphite wordmark (green is reserved for primary actions + connected status) */
.brand { font: 500 16px/normal var(--mb-font-text); letter-spacing: 0.2px; color: var(--mb-ink); }
.tag { font: 500 10px/normal var(--mb-font-text); letter-spacing: 0.1818px; color: var(--mb-text-2); text-transform: uppercase; }
.banner { margin: 8px var(--mb-inset); padding: 10px 12px; border-radius: var(--mb-r-tile);
  font: 500 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-text); 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; gap: 12px; }

/* header — Home Screen 1 "header" group 4163:9251 (SF Pro Text Light 32, not bold) */
.status { display: grid; gap: 12px; }
.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-text-2); }

/* call card — Doctor view 5351:4698 geometry (padding/gap 16, radius 8) on a white
   surface instead of the full accentMain fill (owner: too much green) */
.call-card { display: flex; flex-direction: column; gap: 8px; padding: var(--mb-inset);
  border-radius: var(--mb-r-card); background: var(--mb-white); color: var(--mb-ink); border: 1px solid var(--mb-line); }
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-surface); border-color: var(--mb-surface); }
.cc-top { display: flex; gap: var(--mb-inset); align-items: flex-start; justify-content: space-between; }
.cc-title { margin: 0; max-width: 220px; font: 500 17px/24px var(--mb-font-display); letter-spacing: 0; color: var(--mb-heading); }
.cc-badge { flex: none; }
/* small status chip; shield icons are white strokes (5351:4704/4715) so the chip carries the fill */
.cc-badge > span { display: flex; flex-direction: row; align-items: center; gap: 6px; padding: 4px 10px; border-radius: var(--mb-r-btn);
  font: 500 13px/18px var(--mb-font-display); letter-spacing: 0; color: var(--mb-white); background: var(--mb-violet-chip); white-space: nowrap; }
.cc-badge .when-blocked { background: var(--mb-error-text); }
.cc-badge .when-released { background: var(--mb-text-2); }
.cc-badge img { display: block; width: 16px; height: 16px; }
.cc-sub { margin: 0; font: 400 14px/20px var(--mb-font-display); letter-spacing: 0; color: var(--mb-text-2); }
.call-card .meta { display: flex; flex-wrap: wrap; gap: 0 10px; justify-content: space-between; margin: 0;
  font: 400 14px/20px var(--mb-font-display); letter-spacing: 0; color: var(--mb-text-2); word-break: break-all; }
.call-card code { color: var(--mb-ink); }
/* connected status: the only non-button green — small dot + darkened accent text */
body[data-state="connected"] #stateName { color: var(--mb-connected-text); }
body[data-state="connected"] #stateName::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 6px;
  border-radius: 50%; background: var(--mb-accent-main); vertical-align: 1px; }
/* 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; }

/* in-call: compact header so the video stage and controls dominate */
body[data-state="connecting"] .hello h1, body[data-state="connected"] .hello h1, body[data-state="reconnecting"] .hello h1 { font-size: 20px; font-weight: 400; }
body[data-state="connecting"] #statusText, body[data-state="connected"] #statusText, body[data-state="reconnecting"] #statusText { font-size: 14px; }
body[data-state="connecting"] .call-card, body[data-state="connected"] .call-card, body[data-state="reconnecting"] .call-card { padding: 8px 12px; gap: 4px; }
body[data-state="connecting"] .status, body[data-state="connected"] .status, body[data-state="reconnecting"] .status { gap: 8px; }

/* setup cards — category card "Mask" 4163:9069 (white, 1px border, radius 10) */
.card { background: var(--mb-white); border: 1px solid var(--mb-line); border-radius: var(--mb-r-tile); padding: var(--mb-inset); }
h2 { margin: 0 0 8px; font: 500 17px/normal var(--mb-font-text); letter-spacing: 0.2px; color: var(--mb-heading); }
.card p { margin: 0 0 8px; }
.help { color: var(--mb-text-2); 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-text); }
.media-denied { color: var(--mb-error-text); }

/* 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, white with muted violet label/outline */
  background: var(--mb-white); color: var(--mb-violet); border: 1px solid var(--mb-violet-line); }
button:hover:not(:disabled) { background: var(--mb-violet-hover); }
button.primary, button.ok { flex-basis: 100%; max-width: 100%; background: var(--mb-primary-fill); border-color: var(--mb-primary-fill); color: var(--mb-white); }
button.primary:hover:not(:disabled), button.ok:hover:not(:disabled) { background: var(--mb-primary-fill); filter: brightness(0.95); }
/* destructive: ADAPTATION — Button/def geometry, darkened Error Red fill for 5.65:1 label contrast */
button.danger, button.danger:hover:not(:disabled) { background: var(--mb-error-text); border-color: var(--mb-error-text); color: var(--mb-white); }
button:disabled { cursor: not-allowed; background: var(--mb-disabled-bg); color: var(--mb-disabled-text); border-color: var(--mb-line); }
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-text); color: var(--mb-white); }
button:focus-visible, input:focus-visible, summary:focus-visible, a:focus-visible { outline: 2px solid var(--mb-violet); 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);
  border-left: 3px solid var(--mb-violet-line); font: 400 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: 16 / 9; max-height: 72vh; 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: contain; background: transparent; }
#localVideo { position: absolute; right: 12px; bottom: 12px; width: 28%; max-width: 180px; height: auto; max-height: 45%; object-fit: contain;
  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 (neutral shadow) */
.overlay, #localBadge { background: rgba(255, 255, 255, 0.92); color: var(--mb-ink);
  -webkit-backdrop-filter: blur(var(--mb-nav-blur)); backdrop-filter: blur(var(--mb-nav-blur));
  box-shadow: var(--mb-shadow); font: 500 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-text); }
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);
   opaque white bar + neutral shadow so the controls stay the strongest element below the video */
.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: rgba(255, 255, 255, 0.96); border: 1px solid var(--mb-line); box-shadow: var(--mb-shadow);
  -webkit-backdrop-filter: blur(var(--mb-nav-blur)); backdrop-filter: blur(var(--mb-nav-blur)); }
.controls button { flex: 1 1 0; color: var(--mb-ink); border-color: var(--mb-violet-line); }
.controls button.danger { color: var(--mb-white); border-color: var(--mb-error-text); }
/* toggled-off control: muted violet tint (was accentTint2 fill) */
button[aria-pressed="true"], .controls button[aria-pressed="true"] { background: var(--mb-violet-tint); border-color: var(--mb-violet); color: var(--mb-violet); }

/* ringing — ADAPTATION: notification bell Group1 4163:9254 (incl. its red dot)
   centred in a violet-tint disc with a soft violet 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-violet-tint); animation: mb-pulse 1.2s ease-out infinite; }
.ring .pulse img { display: block; width: 22.385px; height: 23.4413px; }
.ring > p { font: 500 17px/normal var(--mb-font-text); color: var(--mb-heading); }
@keyframes mb-pulse { 0% { box-shadow: 0 0 0 0 rgba(110, 90, 158, 0.40); } 100% { box-shadow: 0 0 0 28px rgba(110, 90, 158, 0); } }
@media (prefers-reduced-motion: reduce) { .ring .pulse { animation: none; box-shadow: 0 0 0 4px var(--mb-violet-line); } }

.outcome { font: 500 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: 500 16px/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 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-text-2); 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-line); 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: 500 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-text-2); }
.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-violet); font: 500 14px/normal 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: 4 / 3; max-height: 64vh; }
  .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; }
}
/* Collapsed secret/invite details inside a step card (MED103-USABLE-CALL-01). */
details.secret { margin-top: 8px; }

/* Camera metadata determines the picture shape; the stage never crops faces.
   Before a call the user's own preview fills the stage instead of a tiny PiP. */
body:not([data-state="connecting"]):not([data-state="connected"]):not([data-state="reconnecting"]) #localVideo {
  inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; border: 0; object-fit: contain;
}