/* ============================================================
   EMR DEMO — STATIC TOOLBAR

   Reduced copy of emr-demo-stepped. The chart markup and styling are the same, minus
   everything with a timeline: no keyframes, no .playing switch, no scrim, no overlay
   windows, no stepper rail, no control row. What remains is one frame.

   Scoped to .emr-static-wrap rather than .emr-demo-wrap so both modules can sit on the
   same page without either one restyling the other.
   ============================================================ */

.emr-static-wrap {
  --ink: #2b3a52;
  --ink-soft: #5b6c85;
  --ink-faint: #8a99b3;
  --rule: rgba(43,58,82,.10);
  --accent: #1B99E8;
  --accent-ink: #0D63A0;
  --glass-fill: rgba(255,255,255,.62);
  --glass-blur: blur(22px) saturate(160%);
  --glass-hi: inset 0 1px 0 rgba(255,255,255,.85);
  --glass-edge: 0 0 0 1px rgba(43,58,82,.06);
  --glass-shadow: 0 10px 34px -12px rgba(20,40,80,.18);
  --radius: 16px;
  --radius-sm: 11px;
  --rail-fill: rgba(34,46,68,.62);
  --rail-hi: inset 0 1px 0 rgba(255,255,255,.12);
  --sk: rgba(43,58,82,.13);
  --flat-scale: .74;
  --bar-bg: #082C54;
  --bar-h: 68px;

  width: 100%;
  padding-top: var(--pad-t, 0px);
  padding-bottom: var(--pad-b, 0px);
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  /* REQUIRED, not a nicety. iOS Safari's text autosizing inflates type inside any block
     whose layout width is far larger than the viewport — and this canvas always lays out
     at 1180px, so on a phone Safari decides 13px "should" be ~30px and overrides it. The
     result: skeleton bars and the logo shrink with zoom (they aren't text) while every
     label stays huge, blows out of its container, and the toolbar chips wrap into three
     overlapping rows. zoom does not suppress the autosizer; only this does.
     100%, not none — none also disables the user's own text-scaling preference. */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  color: var(--ink);
  background: transparent;
  overflow: visible;
  position: relative;
  border-radius: 20px;
}

/* ===== BACKGROUND VIDEO ===== */
.emr-static-wrap .emr-bg-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  clip-path: inset(0 round 20px);
  z-index: 0;
  pointer-events: none;
}

/* ===== SIDE ILLUSTRATIONS =====
   Transparent PNGs flanking the interface, behind the stage (z-index 0) so the screen
   can overlap them, and outside .screen so they are never clipped with it. */
.emr-static-wrap .emr-illo {
  position: absolute;
  bottom: var(--illo-y, 0px);
  z-index: 0;
  width: var(--illo-w, 320px);
  max-width: none;   /* defeat the theme's img { max-width: 100% } */
  height: auto;
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
}
.emr-static-wrap .emr-illo-left  { left:  var(--illo-x, 0px); }
.emr-static-wrap .emr-illo-right { right: var(--illo-x, 0px); }

/* Vertical alignment — offset_y nudges whichever anchor is active */
.emr-static-wrap .emr-illo--bottom { bottom: var(--illo-y, 0px); top: auto; }
.emr-static-wrap .emr-illo--top    { top: var(--illo-y, 0px); bottom: auto; }
.emr-static-wrap .emr-illo--center {
  top: calc(50% + var(--illo-y, 0px));
  bottom: auto;
  transform: translateY(-50%);
}

/* Scale down before the illustrations start crowding the screen, then drop them */
@media (max-width: 1180px) {
  .emr-static-wrap .emr-illo { width: calc(var(--illo-w, 320px) * .72); }
}
@media (max-width: 900px) {
  .emr-static-wrap.illo-hide-sm .emr-illo { display: none; }
}

/* ===== STAGE =====
   Deliberately 2D — no perspective, no preserve-3d. The interface is laid out at
   1180x760 and scaled down, so type is hinted at the larger size. */
.emr-static-wrap .stage {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;        /* keep the interface above the illustrations */
}
/* SCALING — `transform: scale()` plus a negative margin that collapses the layout box.
   `--z` is the single scale value; the responsive block at the foot of this file is the
   only place it changes.

   Not `zoom`. zoom is tempting because it scales the box itself and so fixes the dead
   space for free, but Safari scales BOXES and not FONT SIZES with it: on iOS the chart
   shrank while every label painted at its full 13-15px, spilled its column and wrapped
   the toolbar into overlapping rows. A transform paints the whole subtree, text
   included, so it is correct everywhere.

   The dead space that drove the move to zoom is instead removed arithmetically. A
   transform is painted, not laid out, so the wrapper keeps reserving the untransformed
   canvas — ~108px of unusable space above AND below at scale .74, inside the module
   where no padding field can reach. With the origin at top-left the painted result sits
   in the corner of that box, so a negative right/bottom margin of exactly canvas*(1-z)
   trims the reservation down to the painted size: outer size = w + w*(z-1) = w*z. */
.emr-static-wrap {
  /* Outer canvas, needed for the margin arithmetic. Crisp adds the mat's 8px padding
     and 1px border on each side; glass has neither. */
  --canvas-w: 1180px;
  --canvas-h: 760px;
  --z: var(--flat-scale, 0.74);
}
/* 1180 canvas + .screen's own 1px border (it sits outside the box-sizing guard, which
   only covers .emr and its descendants) + the mat's 8px padding and 1px border. */
.emr-static-wrap.emr-ui--crisp {
  --canvas-w: 1200px;
  --canvas-h: 780px;
}
.emr-static-wrap .iso-wrap {
  position: relative;
  transform: scale(var(--z));
  transform-origin: top left;
  margin-right: calc(var(--canvas-w) * (var(--z) - 1));
  margin-bottom: calc(var(--canvas-h) * (var(--z) - 1));
}

/* ===== SCREEN ===== */
.emr-static-wrap .screen {
  position: relative;
  width: 1180px;
  height: 760px;
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 80px 120px -40px rgba(20,40,80,.45), 0 0 0 1px rgba(255,255,255,.5);
}
.emr-static-wrap .screen::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(46rem 30rem at 12% -8%,  rgba(27,153,232,.18), transparent 60%),
    radial-gradient(40rem 28rem at 92% 8%,   rgba(120,200,210,.18), transparent 60%),
    radial-gradient(48rem 34rem at 70% 108%, rgba(140,165,255,.16), transparent 60%),
    linear-gradient(160deg, #eef3f9, #e3eaf3 70%, #e7edf4);
}

/* ===== EMR LAYOUT ===== */
.emr-static-wrap .emr {
  position: relative;
  display: grid;
  grid-template-columns: 58px 1fr;
  height: 100%;
}

/* ===== NAV RAIL ===== */
.emr-static-wrap .rail {
  margin: 12px 0 12px 12px;
  border-radius: var(--radius);
  background: var(--rail-fill);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  box-shadow: var(--rail-hi), var(--glass-edge), var(--glass-shadow);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 12px 0;
  overflow: hidden;
}
.emr-static-wrap .rail .brand {
  width: 34px; height: 34px; margin-bottom: 12px; border-radius: 9px;
  background: linear-gradient(150deg, #fff, #dfe8f3);
  display: grid; place-items: center;
  color: var(--accent-ink); font-weight: 800;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9);
}
.emr-static-wrap .nav {
  display: flex; flex-direction: column; align-items: center; gap: 2px; width: 100%;
}
.emr-static-wrap .nav a {
  position: relative; color: rgba(226,234,246,.66);
  display: grid; place-items: center;
  width: 40px; height: 38px; border-radius: 10px;
}
.emr-static-wrap .nav a svg { width: 19px; height: 19px; stroke-width: 1.7; }
.emr-static-wrap .nav a.on { color: #fff; background: rgba(255,255,255,.08); }
.emr-static-wrap .nav a.on::before {
  content: ""; position: absolute; left: -8px; top: 9px; bottom: 9px;
  width: 3px; border-radius: 3px;
  background: var(--accent); box-shadow: 0 0 10px var(--accent);
}
.emr-static-wrap .rail .foot { margin-top: auto; }

/* ===== MAIN PANEL ===== */
.emr-static-wrap .main {
  display: grid; grid-template-rows: auto auto 1fr;
  min-height: 0; padding: 12px;
}
.emr-static-wrap .glass {
  background: var(--glass-fill);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-hi), var(--glass-edge), var(--glass-shadow);
  border-radius: var(--radius);
}
.emr-static-wrap .banner {
  display: flex; align-items: center; gap: 14px;
  padding: 11px 18px; margin-bottom: 10px;
}
.emr-static-wrap .banner .name { font-size: 14px; font-weight: 700; letter-spacing: -.01em; }
.emr-static-wrap .banner .spacer { flex: 1; }

/* ============================================================
   DOCNOTE TOOLBAR — full takeover of the host EMR's action strip
   ============================================================ */
.emr-static-wrap .dn-bar {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: var(--bar-h);
  padding: 0 18px;
  margin: 0 0 10px;
  border-radius: var(--radius);
  background: var(--bar-bg);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    0 10px 26px -14px rgba(8,30,60,.55),
    0 0 0 1px rgba(8,44,84,.30);
}
.emr-static-wrap .dn-bar__logo {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  height: var(--logo-h, 26px);
}
/* Both branches size off --logo-h, so swapping in an uploaded logo can't change the
   bar's height — height wins and width follows the aspect ratio. */
.emr-static-wrap .dn-bar__logo svg,
.emr-static-wrap .dn-bar__logo img {
  display: block;
  height: 100%;
  width: auto;
  max-width: none;   /* the theme's img { max-width: 100% } would squash it */
}
.emr-static-wrap .dn-bar__rule {
  flex: 0 0 auto;
  width: 1px;
  align-self: stretch;
  margin: 14px 0;
  background: rgba(255,255,255,.18);
}
.emr-static-wrap .dn-bar__nav {
  display: flex;
  align-items: center;
  /* row-gap stays fixed: --svc-space is the editor's between-buttons control, and
     letting it drive the wrap gap too would collapse two wrapped rows into each
     other at 0. */
  gap: 6px var(--svc-space, 6px);
  min-width: 0;
  flex-wrap: wrap;
}
.emr-static-wrap.dn-nav--right  .dn-bar__nav { margin-left: auto; }
.emr-static-wrap.dn-nav--center .dn-bar__nav { margin-left: auto; margin-right: auto; }
/* Centring the nav means the divider is reading as a left-edge tick rather than a
   separator, so it goes. */
.emr-static-wrap.dn-nav--center .dn-bar__rule,
.emr-static-wrap.dn-nav--right  .dn-bar__rule { display: none; }

/* Chips. Every dimension comes from a custom property so the four option axes —
   chrome, shape, size, content — stay independent: each class sets its own variables
   instead of restating the whole chip, which is what keeps 4x3x3x3 combinations from
   turning into a rule per combination. Defaults here are the shipped look. */
.emr-static-wrap {
  --svc-h: 38px;
  --svc-px: 15px;
  --svc-fs: 15px;
  --svc-gap: 8px;
  --svc-ico: 18px;
  --svc-r: 9px;
  --svc-space: 6px;   /* between buttons; the editor overrides this inline */
}
/* --- Size ------------------------------------------------------------------ */
.emr-static-wrap.dn-size--compact {
  --svc-h: 32px; --svc-px: 12px; --svc-fs: 13.5px; --svc-gap: 6px; --svc-ico: 16px;
}
.emr-static-wrap.dn-size--large {
  --svc-h: 44px; --svc-px: 18px; --svc-fs: 16px; --svc-gap: 9px; --svc-ico: 20px;
}
/* --- Shape ---------------------------------------------------------------- */
.emr-static-wrap.dn-shape--pill   { --svc-r: 999px; }
.emr-static-wrap.dn-shape--square { --svc-r: 4px; }

/* --svc-bg / --svc-bd / --svc-fg (and the --svc-a* selected pair) are emitted by the
   module only when the editor actually picks a colour. Each style variant repeats them
   with its OWN fallback, so an unset field keeps that variant's look while a set one
   overrides all four variants from a single declaration — no variant-times-colour
   matrix, and no "custom colour is ignored unless you also picked Outlined". */
.emr-static-wrap .dn-svc {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--svc-gap);
  height: var(--svc-h);
  padding: 0 var(--svc-px);
  border-radius: var(--svc-r);
  font-size: var(--svc-fs);
  font-weight: 600;
  letter-spacing: -.01em;
  line-height: 1;
  white-space: nowrap;
  color: var(--svc-fg, rgba(255,255,255,.88));
  background: var(--svc-bg, rgba(255,255,255,.07));
  border: 1px solid var(--svc-bd, rgba(255,255,255,.16));
}
/* Selected: Daybreak fill. The border tracks the fill rather than being removed, so the
   chip can't change width when the highlight moves between rows — and a custom selected
   background carries its own edge without needing a second field. */
.emr-static-wrap .dn-svc.is-active {
  color: var(--svc-afg, #fff);
  background: var(--svc-abg, var(--accent));
  border-color: var(--svc-abg, var(--accent));
  /* The default lift is a Daybreak halo, which would read as a bug around a custom
     selected colour — so the module swaps in a neutral one whenever that field is set. */
  box-shadow: var(--svc-aglow, 0 2px 8px -2px rgba(27,153,232,.55));
}

/* --- Icons --------------------------------------------------------------- */
.emr-static-wrap .dn-svc__ico {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
}
.emr-static-wrap .dn-svc__ico svg {
  display: block;
  width: var(--svc-ico);
  height: var(--svc-ico);
}
/* Square by the chip's own height, so an icon-only row keeps the bar's rhythm
   instead of collapsing to the glyph's width. */
.emr-static-wrap .dn-svc--iconly {
  width: var(--svc-h);
  padding: 0;
}
/* The label still ships for screen readers when only the glyph is drawn */
.emr-static-wrap .dn-svc__sr {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* --- Chrome -------------------------------------------------------------- */
/* Plain: text only, no chrome. Padding tightens because there is no edge to sit
   inside — 15px of air against an invisible border reads as a gap, not a button. */
.emr-static-wrap.dn-btn--plain .dn-svc {
  background: var(--svc-bg, transparent);
  border-color: var(--svc-bd, transparent);
  padding: 0 calc(var(--svc-px) - 3px);
}
.emr-static-wrap.dn-btn--plain .dn-svc--iconly { padding: 0; }
.emr-static-wrap.dn-btn--plain .dn-svc.is-active {
  background: var(--svc-abg, rgba(255,255,255,.12));
  border-color: var(--svc-abg, transparent);
  box-shadow: none;
}
/* Filled: a lighter Blue Hour step, reading as raised keys on the bar */
.emr-static-wrap.dn-btn--solid .dn-svc {
  background: var(--svc-bg, rgba(255,255,255,.14));
  border-color: var(--svc-bd, transparent);
}
.emr-static-wrap.dn-btn--solid .dn-svc.is-active {
  background: var(--svc-abg, var(--accent));
  border-color: var(--svc-abg, transparent);
}
/* Soft: Daybreak-tinted glass. Reads as Docnote's own colour on Docnote's own bar,
   where the white-tinted fills read as neutral UI. */
.emr-static-wrap.dn-btn--soft .dn-svc {
  color: var(--svc-fg, #fff);
  background: var(--svc-bg, rgba(27,153,232,.26));
  border-color: var(--svc-bd, rgba(27,153,232,.42));
}
.emr-static-wrap.dn-btn--soft .dn-svc.is-active {
  background: var(--svc-abg, var(--accent));
  border-color: var(--svc-abg, var(--accent));
}

/* ===== WORK AREA ===== */
.emr-static-wrap .work {
  display: grid; grid-template-columns: 230px 1fr 300px;
  gap: 10px; min-height: 0;
}
.emr-static-wrap .col { display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.emr-static-wrap .col > .scroll { overflow: hidden; padding: 0 0 14px; }
.emr-static-wrap .sec-h {
  font-size: 13px; font-weight: 700; color: var(--ink); letter-spacing: -.01em;
  padding: 13px 12px 9px;
  background: linear-gradient(rgba(255,255,255,.72), rgba(255,255,255,0));
}
.emr-static-wrap .row { padding: 11px 12px; border-radius: var(--radius-sm); }
.emr-static-wrap .row + .row { margin-top: 2px; }
.emr-static-wrap .divide { height: 1px; background: var(--rule); margin: 10px 12px; }
.emr-static-wrap .sk { height: 9px; border-radius: 6px; background: var(--sk); }
.emr-static-wrap .sk + .sk { margin-top: 7px; }
.emr-static-wrap .sk.tall { height: 10px; }
.emr-static-wrap .sk.acc { background: rgba(27,153,232,.22); }
.emr-static-wrap .w90 { width: 90%; } .emr-static-wrap .w80 { width: 80%; }
.emr-static-wrap .w70 { width: 70%; } .emr-static-wrap .w60 { width: 60%; }
.emr-static-wrap .w50 { width: 50%; } .emr-static-wrap .w40 { width: 40%; }
.emr-static-wrap .w30 { width: 30%; }
.emr-static-wrap .note { padding: 14px; }
.emr-static-wrap .note + .note { border-top: 1px solid var(--rule); }
.emr-static-wrap .note .lines { margin-top: 9px; }
.emr-static-wrap .labs { margin: 4px 12px 16px; }
.emr-static-wrap .labs .lh {
  font-size: 13px; font-weight: 700; padding: 10px 0 8px;
  border-top: 1px solid var(--rule);
}
.emr-static-wrap .lab {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 2px; border-bottom: 1px solid var(--rule);
}
.emr-static-wrap .lab .caret { color: var(--ink-faint); font-size: 11px; }
.emr-static-wrap .lab .sk { flex: 1; max-width: 60%; }

/* ============================================================
   CRISP INTERFACE STYLE  (default; module.ui_style == 'glass' opts out)
   Hairline borders, tight radii, flat surfaces, light nav rail. The Docnote
   toolbar is deliberately untouched — it is a brand surface, not chart chrome.
   ============================================================ */

/* Layout guard: box-sizing is never declared above, so the real borders added below
   would otherwise push the 230px / 1fr / 300px work grid. */
.emr-static-wrap.emr-ui--crisp .emr,
.emr-static-wrap.emr-ui--crisp .emr * { box-sizing: border-box; }

.emr-static-wrap.emr-ui--crisp {
  --line-strong: #DCE4EC;
  --line-soft: #E8EDF3;
  --fill-subtle: #F4F7FA;
  --fill-selected: #E4F1FC;
  --page: #FAFBFC;

  --glass-blur: none;
  --glass-fill: #fff;
  --radius: 8px;
  --radius-sm: 6px;
  --rule: var(--line-soft);
  --sk: rgba(43,58,82,.11);

  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* Nested frame: a padded mat around the screen. Concentric corners depend on
   inner radius (14) + padding (8) = outer (22). The lift lives on the mat, not the
   screen, so the screen doesn't cast onto its own frame. */
.emr-static-wrap.emr-ui--crisp .iso-wrap {
  padding: 8px;
  background: rgba(238,243,249,.75);
  border: 1px solid rgba(8,44,84,.06);
  border-radius: 22px;
  box-shadow:
    0 2px 4px rgba(8,44,84,.03),
    0 12px 24px -8px rgba(8,44,84,.08),
    0 40px 64px -24px rgba(8,44,84,.16),
    0 80px 110px -50px rgba(20,40,80,.28);
}

/* Screen: inner card. Definition only; the lift is on the mat above. */
.emr-static-wrap.emr-ui--crisp .screen {
  border-radius: 14px;
  border: 1px solid rgba(8,44,84,.10);
  box-shadow:
    0 1px 2px rgba(8,44,84,.05),
    0 6px 14px -6px rgba(8,44,84,.10);
}
.emr-static-wrap.emr-ui--crisp .screen::before { background: var(--page); }

/* Panels: honest hairline + downward-only shadow */
.emr-static-wrap.emr-ui--crisp .glass {
  background: #fff;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border: 1px solid var(--line-strong);
  box-shadow: 0 1px 2px rgba(8,44,84,.05);
  border-radius: var(--radius);
}

/* Light nav rail: full-height and flush, not a floating card */
.emr-static-wrap.emr-ui--crisp .rail {
  margin: 0;
  border-radius: 0;
  /* deeper than --fill-subtle: the rail sits on --page (#FAFBFC), not on white,
     so it needs a real luminance step to read as a distinct surface */
  background: #EFF4F9;
  border-right: 1px solid var(--line-strong);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: none;
  padding: 10px 0;
}
.emr-static-wrap.emr-ui--crisp .rail .brand {
  background: var(--accent);
  color: #fff;
  border-radius: 6px;
  box-shadow: none;
}
.emr-static-wrap.emr-ui--crisp .nav a { color: #7A8CA6; border-radius: 6px; }
.emr-static-wrap.emr-ui--crisp .nav a.on {
  background: var(--fill-selected);
  color: var(--accent-ink);
}
.emr-static-wrap.emr-ui--crisp .nav a.on::before { display: none; }

/* Docnote bar, crisp: the flat 8px radius and a single grounded shadow, matching the
   chart's restraint. The Blue Hour fill and chip treatment carry over unchanged. */
.emr-static-wrap.emr-ui--crisp .dn-bar {
  box-shadow: 0 1px 2px rgba(8,44,84,.10);
}
/* Tighter default radius to match the crisp chart. Scoped to the rounded shape and
   written as the variable, so an explicit Pill or Square choice still wins — a flat
   `border-radius` here would silently override both. */
.emr-static-wrap.emr-ui--crisp.dn-shape--rounded { --svc-r: 6px; }

/* Section headers: flat tinted strip, not a gradient fade */
.emr-static-wrap.emr-ui--crisp .sec-h {
  background: var(--fill-subtle);
  border-bottom: 1px solid var(--line-soft);
  font-size: 13px;
  font-weight: 600;
  padding: 10px 12px;
}

/* Row rhythm: 1px dividers instead of gaps */
.emr-static-wrap.emr-ui--crisp .row { border-radius: 0; padding: 12px; }
.emr-static-wrap.emr-ui--crisp .row + .row {
  margin-top: 0;
  border-top: 1px solid var(--line-soft);
}
.emr-static-wrap.emr-ui--crisp .divide { margin: 0; background: var(--line-soft); }

/* Details */
.emr-static-wrap.emr-ui--crisp .sk { border-radius: 3px; }
.emr-static-wrap.emr-ui--crisp .sk.acc { background: rgba(27,153,232,.20); }
.emr-static-wrap.emr-ui--crisp .note + .note,
.emr-static-wrap.emr-ui--crisp .labs .lh { border-top-color: var(--line-soft); }
.emr-static-wrap.emr-ui--crisp .lab { border-bottom-color: var(--line-soft); }

/* ============================================================
   RESPONSIVE

   The interface is a fixed 1180x760 canvas, so nothing inside it reflows with the
   viewport — the only levers are how far it is scaled down and how much of it is
   shown. Two regimes:

   - Tablet and up: scale to fit. The whole layout stays visible.
   - Phone: scaling to fit would put the toolbar labels at ~4px. Legibility needs
     zoom >= ~0.67, i.e. a viewport of 880px+, so no phone can show all five chips
     AND keep them readable. Below 700px the module therefore holds a legible scale
     and lets the canvas be panned sideways inside its own scroll box, the way a wide
     product screenshot normally behaves. The page itself never scrolls sideways.
     "Shrink to fit on phones" switches to the other trade-off.
   ============================================================ */

/* --- Fit-to-width ---------------------------------------------------------
   --fit-max caps the editor's own scale; min() means a page set to 0.5 is never
   scaled UP by these rules. 1198 = the 1180 canvas + the crisp mat's 16px padding
   and 2px border, so the numbers hold for whichever interface style is on.

   Each step must fit the NARROWEST viewport it applies to, not the widest: a
   `max-width: 800px` rule is still in force at 701px, where the next step down takes
   over. Values are therefore (lowerBound - gutter) / 1198.

   The gutter is the SECTION's padding, not zero — theme dnd rows carry 32px a side, so
   64px comes off the viewport before this module sees it. Counting only a nominal 40px
   total was enough to overflow inside the section at 701px while measuring clean
   against the bare viewport. Budgeted at 64px down to 640, then tapering as themes
   tighten their gutters on phones. */
   min() so a page set to 0.5 is never scaled UP by these caps. */
@media (max-width: 960px) { .emr-static-wrap { --z: min(var(--flat-scale), 0.68); } }
@media (max-width: 880px) { .emr-static-wrap { --z: min(var(--flat-scale), 0.61); } }
@media (max-width: 800px) { .emr-static-wrap { --z: min(var(--flat-scale), 0.53); } }

/* Below 700px the steps only apply in fit mode — pan mode sets --z outright, and is
   immune to the gutter guess above because it scrolls rather than fits. */
@media (max-width: 700px) { .emr-static-wrap.mob--fit { --z: min(var(--flat-scale), 0.48); } }
@media (max-width: 640px) { .emr-static-wrap.mob--fit { --z: min(var(--flat-scale), 0.42); } }
@media (max-width: 560px) { .emr-static-wrap.mob--fit { --z: min(var(--flat-scale), 0.36); } }
@media (max-width: 480px) { .emr-static-wrap.mob--fit { --z: min(var(--flat-scale), 0.31); } }
@media (max-width: 420px) { .emr-static-wrap.mob--fit { --z: min(var(--flat-scale), 0.28); } }
@media (max-width: 380px) { .emr-static-wrap.mob--fit { --z: min(var(--flat-scale), 0.25); } }
@media (max-width: 340px) { .emr-static-wrap.mob--fit { --z: min(var(--flat-scale), 0.22); } }

@media (max-width: 700px) {
  /* --- Pan mode (default) --- */
  .emr-static-wrap.mob--pan { --z: var(--mob-scale, 0.62); }
  /* The scroll box is .stage, not the wrapper: keeping it inside the module is what
     stops a phone from being able to scroll the whole PAGE sideways. */
  .emr-static-wrap.mob--pan .stage {
    justify-content: flex-start;
    overflow-x: auto;
    /* overflow-y can't stay visible next to overflow-x: auto — it computes to auto and
       adds a second scrollbar. Hidden is safe because the mobile shadow below is small
       enough to sit inside the padding. */
    overflow-y: hidden;
    padding: 4px 0 12px;
    -webkit-overflow-scrolling: touch;
    /* Left visible rather than hidden: with no fade available (the page background is
       unknown, so a gradient can't be matched to it) the scrollbar IS the affordance
       that there is more to the right. iOS hides it until touched regardless. */
    scrollbar-width: thin;
    overscroll-behavior-x: contain;   /* don't hand the swipe to the page or browser */
  }

  /* --- Both modes --- */
  /* The desktop lift is four stacked shadows up to 110px of blur. At phone scale it
     reads as haze rather than elevation, costs real paint time on a scrolling page,
     and is too tall to fit inside the pan box without clipping. */
  .emr-static-wrap.emr-ui--crisp .iso-wrap {
    box-shadow: 0 2px 6px rgba(8,44,84,.06), 0 10px 22px -10px rgba(8,44,84,.20);
  }
  .emr-static-wrap .screen {
    box-shadow: 0 1px 2px rgba(8,44,84,.05), 0 4px 10px -6px rgba(8,44,84,.10);
  }
  /* Desktop padding values are tuned against a desktop section's own 96px rows;
     carried over verbatim they read as dead space on a phone. */
  .emr-static-wrap {
    padding-top: calc(var(--pad-t, 0px) * .55);
    padding-bottom: calc(var(--pad-b, 0px) * .55);
  }
}

/* No room for a flanking illustration next to the interface at this width, whatever
   the "hide on small screens" toggle says — it would overlap the screen. */
@media (max-width: 560px) {
  .emr-static-wrap .emr-illo { display: none; }
}