/* dc-emr-mode.css — WRITTEN BY domains/email/tools/mkemr546.py from the EMR-MODE region of dc-emr.css (labs 546).
   The email doctor loads this sheet up front and dc-emr.css only on the first switch into "Read in my
   browser" (dc-emr-mode.js). Never edit it here: edit the region in dc-emr.css and run the generator. */
/* EMR-MODE:START ------------------------------------------------------------
   What the email doctor needs before its first switch: the tokens, the mode
   switch, the "Record by record" cards, and the rule that hides the console in
   the browser mode. domains/email/tools/mkemr546.py copies this region byte for
   byte into dc-emr-mode.css, the only emr sheet the doctor loads up front;
   dc-emr-mode.js loads the whole of dc-emr.css on the first switch. The record
   pages load dc-emr.css alone. Edit the region here, never in dc-emr-mode.css. */
:root {
    --emr-card:       #ffffff;
    --emr-tint:       #FAFAFA;
    --emr-accent-ink: #9A3412;                   /* the accent as TEXT on paper */
    --emr-on-ink:     #ffffff;
    --emr-good:       var(--free);
    --emr-warn:       var(--unsure);
    --emr-bad:        var(--taken);
    --emr-soft:       rgba(194, 65, 12, .055);
    --emr-edge:       rgba(194, 65, 12, .30);
    --emr-mono:       ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace;
    --emr-r:          10px;
}
html[data-dark] {
    --emr-card:       #121920;
    --emr-tint:       #0F151B;
    --emr-accent-ink: #FDBA74;
    --emr-on-ink:     #0C1116;
    --emr-soft:       rgba(249, 115, 22, .085);
    --emr-edge:       rgba(249, 115, 22, .36);
}

/* the doctor's two modes */
.wx-hero__head .emr-mode { grid-column: 1 / -1; }
.emr-mode { display: inline-flex; flex-wrap: wrap; gap: 6px; margin: 1.6rem 0 0; padding: 4px; border: 1px solid var(--line); border-radius: 6px; background: var(--emr-card); max-width: 100%; }
.emr-mode__b {
    -webkit-appearance: none; appearance: none; margin: 0; border: 0; border-radius: 4px; background: transparent; cursor: pointer;
    min-height: 44px; padding: 6px 14px; text-align: left; color: var(--ink-77); font-family: inherit; font-weight: 600; font-size: .9rem; line-height: 1.25;
    display: grid; gap: 2px; flex: 1 1 220px;
}
.emr-mode__b small { font-weight: 400; font-size: .78rem; color: var(--ink-55); }
.emr-mode__b:hover { background: var(--line-soft); color: var(--ink); }
.emr-mode__b[aria-pressed="true"] { background: var(--ink); color: var(--emr-on-ink); cursor: default; }
.emr-mode__b[aria-pressed="true"] small { color: var(--emr-on-ink); opacity: .86; }
.emr-mode__b:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
html[data-emr-mode="browser"] #em-console, html[data-emr-mode="browser"] #results { display: none; }
html:not(.js) .emr-mode { display: none; }

/* the boxes, and one card per record page (the doctor's "Record by record" band, and the method page) */
.emr-box { background: var(--emr-card); border: 1px solid var(--line); border-radius: var(--emr-r); padding: 18px 20px; min-width: 0; }
.emr-box h2, .emr-box h3 { font-size: .98rem; font-weight: 600; margin: 0 0 6px; color: var(--ink); letter-spacing: -.01em; }
.emr-box p { margin: 0; font-size: .92rem; color: var(--ink-77); line-height: 1.55; }
.emr-cards { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); margin-top: 1.6rem; }
a.emr-box { display: block; text-decoration: none; transition: border-color .15s; }
a.emr-box:hover { border-color: var(--accent); }
.emr-cards .emr-box h3 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; font-size: 1.05rem; }
.emr-cards .emr-box h3 span { font: 600 .68rem/1.2 var(--emr-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--emr-accent-ink); }
@media print {
    .emr-mode { display: none !important; }
}
/* EMR-MODE:END */