/* Medrecords AI — shared responsive layer for the static v3 build.
   The prototypes are desktop-authored with inline styles; this layer adapts
   them below 1080px (nav) / 760px (layout) without touching page markup.
   Page-specific fixes belong in that page's own <style> block. */

img { max-width: 100%; height: auto; }

/* mobile menu (built by /scripts/site.js from the desktop nav) */
.mnav-toggle {
  display: none; align-items: center; justify-content: center;
  width: 42px; height: 42px; border: none; background: none; cursor: pointer;
  color: #16140F; border-radius: 10px; flex: 0 0 auto;
}
.mnav-toggle:hover { background: rgba(22,20,15,.06); }
.mnav-panel {
  display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  background: #FAF9F5; z-index: 200; overflow-y: auto;
  padding: 18px 22px 40px; -webkit-overflow-scrolling: touch;
}
.mnav-panel.is-open { display: block; }
.mnav-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.mnav-group { border-bottom: 1px solid #E7E3D9; padding: 14px 0; }
.mnav-group > .mnav-label {
  font-family: 'IBM Plex Mono', monospace; font-size: 11px; font-weight: 600;
  letter-spacing: .13em; text-transform: uppercase; color: #2F6B50; margin-bottom: 8px;
}
.mnav-group a { display: block; padding: 9px 0; font-size: 16px; font-weight: 500; color: #16140F; text-decoration: none; }
.mnav-cta { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; }
.mnav-cta a {
  display: flex; align-items: center; justify-content: center; padding: 13px 18px;
  border-radius: 999px; font-size: 15px; font-weight: 600; text-decoration: none;
}
.mnav-cta .mnav-primary { background: #16140F; color: #F7F5F0; }
.mnav-cta .mnav-secondary { border: 1.5px solid #2F6B50; color: #2F6B50; }

@media (max-width: 1080px) {
  /* hide desktop nav links + secondary CTAs; keep logo, primary CTA, burger */
  div:has(> .mm) { display: none !important; }
  a[href="https://workspace.medrecords.ai/signin"] { display: none !important; }
  div:has(> a[href="https://workspace.medrecords.ai/signin"]) > a[href^="/test-a-file/"] { display: none !important; }
  .mnav-toggle { display: inline-flex; }
}

@media (max-width: 480px) {
  /* top bar: logo + burger only; demo CTA lives in the menu and page body */
  div:has(> a[href="https://workspace.medrecords.ai/signin"]) > a[href="/demo/"] { display: none !important; }
}

@media (max-width: 760px) {
  html, body { overflow-x: hidden; }
  /* multi-column inline grids are collapsed by scripts/site.js (track-count
     heuristic — CSS attribute selectors can't parse the templates safely) */
  [style*="grid-template-columns"] > * { min-width: 0; }
  [style*="display: flex"] > *, [style*="display:flex"] > * { min-width: 0; }
  /* display-size headings shrink to fit (covers 50-79px inline sizes) */
  [style*="font-size: 7"][style*="px"]:is(h1,h2,h3,div,span),
  [style*="font-size: 6"][style*="px"]:is(h1,h2,h3,div,span),
  [style*="font-size: 58px"], [style*="font-size: 56px"],
  [style*="font-size: 54px"], [style*="font-size: 52px"],
  [style*="font-size: 50px"] { font-size: 38px !important; line-height: 1.1 !important; letter-spacing: -0.015em !important; }
  [style*="font-size: 48px"], [style*="font-size: 46px"],
  [style*="font-size: 44px"], [style*="font-size: 42px"],
  [style*="font-size: 40px"] { font-size: 32px !important; line-height: 1.15 !important; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

:where(a[href], button, input, select, textarea, [tabindex]):focus-visible {
  outline: 3px solid rgba(47, 107, 80, .42) !important;
  outline-offset: 3px !important;
}
.mm:focus-within .mm-panel,
.mm.is-open .mm-panel { opacity: 1; visibility: visible; transform: none; pointer-events: auto; }
.mm:focus-within .mm-trig svg,
.mm.is-open .mm-trig svg { transform: rotate(180deg); }
:where(button, a[href], [role="button"]):active { opacity: .82; }

/* ---- premium finish layer (sitewide, additive — added 2026-07) ----
   Tactile paper feel + typographic finish. Everything here is cosmetic and
   safe to remove; no layout, no color-token overrides. */

/* selection reads as ink on pressed paper, not browser blue */
::selection { background: rgba(47, 107, 80, .16); color: #16140F; }

/* crisper serif + mono rendering on high-dpi */
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
h1, h2, h3, blockquote { text-rendering: optimizeLegibility; font-kerning: normal; }

/* underlined links: hairline, set slightly off the baseline like set type */
a { text-underline-offset: 3px; text-decoration-thickness: 1px; }

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* faint paper grain over the whole page — the "printed stock" texture.
   Fixed, non-interactive, ~2.5% visible; skipped when the user asks for
   reduced transparency. */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 2147483646;
  pointer-events: none; opacity: .025;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 240px 240px;
}
@media (prefers-reduced-transparency: reduce) { body::after { display: none; } }

/* ---------------------------------------------------------------
   Content Hub (/content-hub/*) — mobile refinements.
   These pages carry their own inline layout CSS; the rules below
   only correct what breaks below 640px. Added 2026-08-21.
   --------------------------------------------------------------- */
@media (max-width: 640px) {
  /* hero identity: stack the org logo above the title instead of
     squeezing the H1 into the remaining ~190px beside it */
  .hero-id { flex-direction: column; align-items: flex-start; gap: 12px; }
  .hero-id h1 { width: 100%; }
  .org-logo { flex: 0 0 auto; }

  /* hero meta ("3 sections · 2 sources · Verified …") wraps instead
     of splitting each item across two lines */
  .hero-meta-line { flex-wrap: wrap; row-gap: 6px; }
  .disclosure { flex-wrap: wrap; row-gap: 6px; }

  /* rubric + notes rows: label above value, not a cramped 2-column grid */
  .eval-row, .note-row { grid-template-columns: 1fr; row-gap: 4px; }
  .eval-row .ek, .note-row .nk { font-size: 13px; }

  /* key-facts and comparison tables scroll on their own axis so the
     page body never scrolls sideways */
  .ec-body table, .keyfacts table, main table { display: block; overflow-x: auto; max-width: 100%; }
}

/* Below 1080 the dark "Test a file" button is hidden, which leaves the quiet
   white "Book a demo" as the bar's only call to action — a weaker button than
   the single dark one that used to sit there. Give it the dark treatment for
   as long as it is on its own. Added 2026-08-23. */
@media (max-width: 1080px) {
  div:has(> a[href="https://workspace.medrecords.ai/signin"]) > a.scp1[href="/demo/"] {
    padding: 9px 17px !important;
    background: linear-gradient(rgb(38, 34, 25), rgb(22, 20, 15)) !important;
    color: rgb(244, 242, 236) !important;
    border-color: rgb(22, 20, 15) !important;
    box-shadow: rgba(22, 20, 15, .25) 0 1px 2px, rgba(255, 255, 255, .07) 0 1px 0 inset !important;
  }
}

/* --- homepage comparison table ------------------------------------
   Seven columns at a 1240px floor inside an 1180px text container meant
   the table overflowed at every desktop width — you had to scroll
   sideways to reach our own column, which is the one the section exists
   to show. The section now runs to 1320px and the table floor is
   1040px, so it fits without scrolling from roughly 1140px up. Below
   that it still scrolls, and these rules make that a deliberate
   one-column-at-a-time read rather than a squeeze. Added 2026-08-23. */

/* the scroll hint is only true while the table actually overflows */
@media (min-width: 1140px) {
  .cmp-scroll-hint { display: none !important; }
}

@media (max-width: 1139px) {
  /* Give back the width the sticky row-label column eats, so a whole
     option column is readable beside it instead of half of one. An 820px
     floor keeps every laptop and tablet width from about 890px up free of
     sideways scroll; below that the scroll is real and the sticky label
     column carries the read. */
  .cmp-table { min-width: 820px !important; }
  .cmp-table th[scope="row"] { width: 156px !important; }
  .cmp-table th, .cmp-table td { padding: 13px 9px !important; }
}

@media (max-width: 600px) {
  .cmp-table { min-width: 660px !important; }
  .cmp-table th[scope="row"] { width: 124px !important; }
  .cmp-table th, .cmp-table td { padding: 12px 8px !important; font-size: 12.5px !important; }
  /* the sticky label column has to stay opaque over a scrolled column */
  .cmp-table th[scope="row"] { background: #fff !important; }
  .cmp-scroll { border-radius: 12px !important; }
}

/* Force a clean GPU compositing boundary at the very end of the page.
   Pages here run to 10-14k px with many animated/composited cards above;
   without this, some Chrome/GPU combinations tile-render stale content
   into the space right after </footer>. contain + a fresh stacking
   context stops the last section from inheriting a corrupted tile. */
footer {
  contain: layout style paint;
  isolation: isolate;
  position: relative;
}

/* --- related-pages block (_build/seo-geo/sibling_links.py) -------------------
   Added 2026-08-30. Search Console had 382 URLs sitting in "Discovered -
   currently not indexed" and 88 pages reachable by exactly one internal link.
   These cards are the sibling links that fix that, so they live in the shared
   sheet rather than in each page's inline <style>: the block is injected into
   seven sections whose pages are built by four different generators. */
.rl-wrap { max-width: 1180px; margin: 0 auto; padding: 34px 32px 46px; }
.rl-h {
  font-family: Georgia, 'Times New Roman', serif; font-size: 20px; font-weight: 600;
  letter-spacing: -.01em; color: #16140F; margin: 0 0 16px;
}
.rl-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 13px;
  list-style: none; margin: 0; padding: 0; }
.rl-grid > li { margin: 0; }
.rl-card {
  display: block; border: 1px solid #E7E3D9; background: #FFFDF8; border-radius: 12px;
  padding: 15px 17px; text-decoration: none; color: #16140F;
  transition: border-color .15s, transform .15s;
}
.rl-card:hover { border-color: #A9C4B2; transform: translateY(-2px); text-decoration: none; }
.rl-card b {
  display: block; font-family: Georgia, 'Times New Roman', serif; font-size: 14.5px;
  font-weight: 600; letter-spacing: -.005em; margin-bottom: 5px;
}
.rl-card span { display: block; font-size: 12.5px; line-height: 1.5; color: #615D54; }
@media (max-width: 960px) { .rl-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) {
  .rl-wrap { padding: 26px 20px 34px; }
  .rl-grid { grid-template-columns: 1fr; }
}

/* --- Content Hub profile breadcrumb (_build/seo-geo/profile_schema.py) ------
   Added 2026-08-30. The profile trail moved from <p class="meta"> to
   <nav class="meta"> so it could carry BreadcrumbList schema and link its
   section hub. <p> carries a browser default margin and <nav> does not, so
   without this the trail collides with the hero below it. */
nav.meta { margin: 1em 0; }
nav.meta a { color: inherit; text-decoration: none; border-bottom: 1px solid rgba(122, 117, 106, .35); }
nav.meta a:hover { color: #2F6B50; border-bottom-color: #2F6B50; }