/* ============================================================
   ESOPHAGEAL MANOMETRY — component stylesheet.

   Lifted VERBATIM from the approved prototype. Every rule is prefixed
   with the root class `.emano` so nothing here leaks onto a page and no
   page rule reaches in. Scoping is the ONLY change: not one colour,
   size, radius or font-size has been altered.

   The prototype's `body` rule carried the font stack and ink colour for
   its content; those move onto `.emano` itself, which is the component
   root — same values, same effect. Its `margin`/`padding` are dropped
   because the component is not the page.

   The canvas rule stays `width:100%; height:auto` — the backing store is
   sized in JS (§4.3 / §4.4) and the CSS width is what drives it.
   ============================================================ */

.emano, .emano * { box-sizing: border-box; }

.emano {
    background: #FFFFFF; color: #111111;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
.emano .wrap { max-width: 980px; margin: 0 auto; }
.emano h1 { font-size: 21px; margin: 0 0 4px; }
.emano .sub { font-size: 14px; margin: 0 0 20px; }

.emano .panel { border: 2px solid #D8D2C7; border-radius: 12px; padding: 16px; margin-bottom: 16px; }
.emano canvas { width: 100%; height: auto; display: block; }

.emano .moderow { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; }
.emano .moderow .lbl { font-size: 13px; font-weight: 700; margin-right: 4px; }
.emano button.mode {
    font: inherit; font-size: 13px; font-weight: 700;
    padding: 8px 16px; border-radius: 9px; cursor: pointer;
    background: #FFFFFF; color: #111111; border: 2px solid #B8B8B8;
}
.emano button.mode.on { background: #E8F4F8; border-color: #2E7C9A; }
.emano button.mode[data-mode="achalasia"].on { background: #FAEDEC; border-color: #B4362F; }
.emano button.mode[data-mode="gerd"].on { background: #FFF1D2; border-color: #C9922A; }

.emano button.run {
    font: inherit; font-size: 14px; font-weight: 700;
    padding: 9px 22px; border-radius: 9px; cursor: pointer;
    background: #EFF4EC; color: #111111; border: 2px solid #4B7B3F;
}

.emano .readouts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 4px; }
@media (max-width: 720px) { .emano .readouts { grid-template-columns: 1fr; } }
.emano .ro { border: 2px solid #B8B8B8; border-left-width: 6px; border-radius: 10px; padding: 11px 13px; }
.emano .ro .k { font-size: 11px; font-weight: 700; }
.emano .ro .v { font-size: 19px; font-weight: 700; margin-top: 3px; }

.emano .explain { border: 2px solid #C9922A; background: #FFF1D2; border-radius: 10px; padding: 13px 15px; margin-top: 16px; }
.emano .explain .h { font-size: 13px; font-weight: 700; margin-bottom: 4px; }
.emano .explain .b { font-size: 14px; }

.emano .locked { border: 2px solid #B4362F; background: #FAEDEC; border-radius: 10px; padding: 13px 15px; margin-top: 20px; }
.emano .locked .h { font-size: 13px; font-weight: 700; margin-bottom: 4px; }
.emano .locked ul { margin: 6px 0 0; padding-left: 18px; font-size: 13px; }
.emano .locked li { margin-bottom: 5px; }
.emano .foot { font-size: 12px; margin-top: 8px; }