/* mail-modal.css — per-situation notification detail modal. Namespaced .tmail-*.
   Redesigned 2026-08-23: contained hero STAGE, a real lede (no "SUMMARY" label),
   a unified stat strip (no ghost-box tiles), calmed motion (one draw-on per hero,
   no perpetual glow/pulse), data-accurate pH / PPM / VPD heroes, a dominant add-back
   recipe panel + prominent message panel, report-completed + room check-up situations.
   Reduced-motion → static final frame. Tokens from src/styles/1-settings/base.css. */

/* ── modal shell: scrim overlay + centered scrollable glass card ── */
.tmail-overlay {
  position: fixed; inset: 0; z-index: 2147483350;
  display: flex; align-items: center; justify-content: center; padding: 24px;
  background: rgba(2, 4, 12, 0.62); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  opacity: 0; transition: opacity 0.24s var(--ease-out, ease); font-family: var(--font-body, Inter, system-ui, sans-serif);
}
.tmail-overlay.is-open { opacity: 1; }
.tmail-overlay { --a: var(--accent-cyan); }
.tmail-overlay.a-rose { --a: var(--accent-rose); }
.tmail-overlay.a-amber { --a: var(--accent-amber); }
.tmail-overlay.a-cyan { --a: var(--accent-cyan); }

.tmail-card{
  --a:var(--accent-cyan);
  position:relative; width:min(600px,94vw); max-height:88vh; overflow-x:hidden; overflow-y:auto;
  border-radius:var(--r-xl); padding:0 0 16px;
  background:linear-gradient(180deg, var(--glass-3), var(--glass-1));
  border:1px solid var(--glass-border-2);
  box-shadow:0 30px 90px rgba(0,0,0,.6);
  color:var(--text-primary); font-family:var(--font-body);
  transform:translateY(12px) scale(.97); opacity:0;
  transition:transform .34s var(--ease-spring, cubic-bezier(.22,1,.36,1)), opacity .24s var(--ease-out,ease);
}
.tmail-overlay.is-open .tmail-card{ transform:none; opacity:1; }
.tmail-card.a-rose{--a:var(--accent-rose)} .tmail-card.a-amber{--a:var(--accent-amber)} .tmail-card.a-cyan{--a:var(--accent-cyan)}
/* the "envelope seam": a single accent hairline across the top */
.tmail-card::before{content:''; position:absolute; inset:0 0 auto 0; height:2px;
  background:linear-gradient(90deg, transparent, var(--a), transparent); opacity:.9}

.tmail-close{position:absolute; top:15px; right:14px; width:30px; height:30px; display:grid; place-items:center; border-radius:9px;
  border:1px solid var(--glass-border); background:var(--glass-2); color:var(--text-muted); cursor:pointer; z-index:2;
  transition:color var(--t-fast), border-color var(--t-fast)}
.tmail-close:hover{color:var(--accent-rose); border-color:var(--accent-rose)}

/* header */
.tmail-head{display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:13px; padding:18px 50px 14px 18px}
.tmail-head-ico{width:42px; height:42px; display:grid; place-items:center; border-radius:12px; color:var(--a);
  background:color-mix(in srgb, var(--a) 15%, transparent); border:1px solid color-mix(in srgb, var(--a) 28%, transparent)}
.tmail-head-txt{min-width:0}
.tmail-eyebrow{font-size:10.5px; font-weight:600; letter-spacing:.11em; text-transform:uppercase; color:var(--text-dim);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.tmail-name{margin:3px 0 0; font-family:var(--font-display); font-size:20px; font-weight:700; letter-spacing:-.02em; line-height:1.15}
.tmail-sev{align-self:start; margin-top:2px; padding:4px 10px; border-radius:100px; font-size:10px; font-weight:700; letter-spacing:.05em;
  color:var(--a); background:color-mix(in srgb, var(--a) 16%, transparent); border:1px solid color-mix(in srgb, var(--a) 26%, transparent)}
.tmail-sev.s-rose{--a:var(--accent-rose)} .tmail-sev.s-amber{--a:var(--accent-amber)} .tmail-sev.s-cyan{--a:var(--accent-cyan)}

/* hero — CONTAINED in a stage so the SVG has a home (was floating) */
.tmail-stage{position:relative; margin:0 18px; height:158px; display:grid; place-items:center; overflow:hidden;
  border-radius:var(--r-lg); background:
    radial-gradient(120% 100% at 50% 0%, color-mix(in srgb, var(--a) 12%, transparent) 0%, transparent 66%),
    var(--glass-1);
  border:1px solid var(--glass-border)}
.tmail-hero-svg{width:min(300px,92%); height:auto; max-height:130px; overflow:visible;
  color:var(--a); fill:none; stroke:var(--a); stroke-width:2; stroke-linecap:round; stroke-linejoin:round}

/* lede — the summary as a real leading paragraph, no "SUMMARY" label */
.tmail-lede{margin:16px 18px 4px; font-size:14.5px; line-height:1.62; color:var(--text-secondary); max-width:62ch}
.tmail-lede b{color:var(--text-primary); font-weight:600}

/* unified stat strip — one panel, hairline dividers, no ghost boxes */
.tmail-tiles{display:flex; margin:14px 18px 6px; border-radius:var(--r-lg); overflow:hidden;
  border:1px solid var(--glass-border); background:var(--glass-1)}
.tmail-tile{flex:1 1 0; min-width:0; overflow:hidden; display:flex; flex-direction:column; gap:3px; padding:13px 14px}
.tmail-tile + .tmail-tile{border-left:1px solid var(--glass-border)}
.tmail-tile-v{font-family:var(--font-display); font-size:20px; font-weight:700; line-height:1.05; color:var(--text-primary); font-variant-numeric:tabular-nums; letter-spacing:-.02em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.tmail-tile.t-rose .tmail-tile-v{color:var(--accent-rose)} .tmail-tile.t-amber .tmail-tile-v{color:var(--accent-amber)} .tmail-tile.t-cyan .tmail-tile-v{color:var(--accent-cyan)}
.tmail-tile-l{font-size:10.5px; color:var(--text-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}

/* body sections — quiet, sparse. A hairline label used only where it earns it. */
.tmail-block{margin:16px 18px 0}
.tmail-block-h{display:flex; align-items:center; gap:7px; font-size:11px; font-weight:600; color:var(--text-muted); margin-bottom:9px}
.tmail-block-h::after{content:''; flex:1; height:1px; background:var(--glass-border)}
.tmail-block-h svg{color:var(--text-dim); flex:0 0 auto}

/* explainer — subtle inset, NO colored border-left */
.tmail-explain{margin:16px 18px 0; padding:13px 14px; border-radius:var(--r-lg); background:var(--glass-1); border:1px solid var(--glass-border)}
.tmail-explain .tmail-block-h{margin-bottom:7px}
.tmail-explain p{margin:0; font-size:12.5px; line-height:1.6; color:var(--text-muted)}
.tmail-explain b{color:var(--text-secondary)}

/* chips */
.tmail-chips{display:flex; flex-wrap:wrap; gap:7px}
.tmail-chip{display:inline-flex; align-items:center; gap:7px; padding:6px 11px; border-radius:100px; font-size:11.5px;
  color:var(--text-secondary); background:var(--glass-2); border:1px solid var(--glass-border)}
.tmail-chip b{color:var(--a); font-weight:600; font-size:10.5px}

/* range meter */
.tmail-meter-track{position:relative; height:8px; border-radius:100px; background:var(--glass-2)}
.tmail-meter-fill{position:absolute; inset:0 auto 0 0; border-radius:100px; width:var(--to)}
.tmail-meter-fill.t-rose{background:linear-gradient(90deg,var(--accent-amber),var(--accent-rose))}
.tmail-meter-fill.t-amber{background:linear-gradient(90deg,var(--accent-cyan),var(--accent-amber))}
.tmail-meter-fill.t-cyan{background:linear-gradient(90deg,var(--accent-teal),var(--accent-cyan))}
.tmail-meter-knob{position:absolute; top:50%; width:12px; height:12px; border-radius:50%; background:var(--text-primary);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--a) 35%, transparent); transform:translate(-50%,-50%)}
.tmail-meter-lbls{display:flex; justify-content:space-between; margin-top:6px; font-size:9.5px; color:var(--text-dim); font-variant-numeric:tabular-nums}

/* grouped digest breakdown */
.tmail-gb{display:flex; flex-direction:column; gap:9px}
.tmail-gb-room{border:1px solid var(--glass-border); border-radius:var(--r-lg); overflow:hidden; background:var(--glass-1)}
.tmail-gb-rh{display:flex; align-items:center; justify-content:space-between; gap:8px; padding:9px 13px; font-family:var(--font-display); font-weight:600; font-size:13px; letter-spacing:-.01em; background:color-mix(in srgb,var(--a) 7%, transparent); border-bottom:1px solid var(--glass-border)}
.tmail-gb-count{min-width:20px; height:20px; padding:0 6px; display:inline-grid; place-items:center; border-radius:100px; font-size:11px; font-weight:700; color:var(--a); background:color-mix(in srgb,var(--a) 15%, transparent); font-variant-numeric:tabular-nums}
.tmail-gb-row{display:grid; grid-template-columns:8px minmax(80px,auto) 1fr auto; align-items:center; gap:9px; padding:8px 13px; border-top:1px solid color-mix(in srgb,var(--glass-border) 50%, transparent)}
.tmail-gb-row:first-of-type{border-top:0}
.tmail-gb-dot{width:8px; height:8px; border-radius:50%}
.tmail-gb-dot.t-rose{background:var(--accent-rose)} .tmail-gb-dot.t-amber{background:var(--accent-amber)} .tmail-gb-dot.t-cyan{background:var(--accent-cyan)}
.tmail-gb-sys{font-weight:600; font-size:12.5px; color:var(--text-primary); white-space:nowrap}
.tmail-gb-msg{font-size:12px; color:var(--text-muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.tmail-gb-sev{font-size:9px; font-weight:700; letter-spacing:.05em; padding:2px 6px; border-radius:5px}
.tmail-gb-sev.t-rose{color:var(--accent-rose); background:color-mix(in srgb,var(--accent-rose) 15%, transparent)}
.tmail-gb-sev.t-amber{color:var(--accent-amber); background:color-mix(in srgb,var(--accent-amber) 15%, transparent)}
/* digest "+N more rooms" — keeps briefs from running forever */
.tmail-gb-more{padding:9px 13px; font-size:11.5px; color:var(--text-dim); text-align:center; border-top:1px solid color-mix(in srgb,var(--glass-border) 50%, transparent)}

/* live room readings */
.tmail-reads{display:grid; grid-template-columns:repeat(auto-fit,minmax(88px,1fr)); gap:8px}
.tmail-read{display:flex; flex-direction:column; gap:2px; padding:10px 11px; border-radius:var(--r-md); background:var(--glass-1); border:1px solid var(--glass-border)}
.tmail-read.is-bad{border-color:color-mix(in srgb,var(--accent-rose) 45%, transparent)}
.tmail-read-l{font-size:9.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--text-dim)}
.tmail-read-v{font-family:var(--font-display); font-size:16px; font-weight:700; color:var(--accent-emerald); font-variant-numeric:tabular-nums}
.tmail-read.is-bad .tmail-read-v{color:var(--accent-rose)}
.tmail-spark{width:100%; height:20px; margin-top:4px; overflow:visible}
.tmail-spark-p{fill:none; stroke:var(--accent-cyan); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round}
.tmail-spark-p.bad{stroke:var(--accent-rose)}

/* recommended actions (retained for any caller that still passes recs) */
.tmail-recs{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px}
.tmail-recs li{display:flex; align-items:flex-start; gap:10px; font-size:12.5px; line-height:1.5; color:var(--text-secondary)}
.tmail-rec-ck{flex:0 0 auto; width:19px; height:19px; display:grid; place-items:center; border-radius:6px; color:var(--accent-emerald); background:color-mix(in srgb,var(--accent-emerald) 15%, transparent)}
.tmail-rec-ck svg{width:12px; height:12px}

/* actions footer — one primary, two quiet */
.tmail-actions{display:flex; gap:8px; margin:20px 18px 0}
.tmail-act{flex:1 1 auto; display:inline-flex; align-items:center; justify-content:center; gap:7px; padding:11px; border-radius:var(--r-md);
  border:1px solid var(--glass-border); background:var(--glass-1); color:var(--text-secondary); font:600 12.5px/1 var(--font-body); cursor:pointer;
  transition:background var(--t-fast), border-color var(--t-fast), color var(--t-fast)}
.tmail-act:hover{background:var(--glass-3)}
.tmail-act-resolve{color:#fff; background:color-mix(in srgb,var(--accent-emerald) 82%, #0b3); border-color:transparent}
.tmail-act-resolve:hover{background:var(--accent-emerald)}
.tmail-act-snooze:hover{color:var(--accent-cyan); border-color:color-mix(in srgb,var(--accent-cyan) 45%, transparent)}
.tmail-act-archive:hover{color:var(--accent-rose); border-color:color-mix(in srgb,var(--accent-rose) 45%, transparent)}

/* ── heroes: draw-on ONCE, no perpetual glow/pulse (the calm) ── */
.tmail-cell rect{stroke:color-mix(in srgb,var(--a) 55%, transparent); fill:color-mix(in srgb,var(--a) 7%, transparent); opacity:0; transform:scale(.6); transform-box:fill-box; transform-origin:center; animation:tmail-cell-in .5s var(--ease-out) var(--d) both}
.tmail-cell-dot{fill:var(--a); stroke:none; opacity:.55; animation:tmail-dot-pulse 2.6s ease-in-out var(--d) infinite}
@keyframes tmail-cell-in{to{opacity:1; transform:scale(1)}}
@keyframes tmail-dot-pulse{0%,100%{opacity:.35}50%{opacity:.85}}
.tmail-sweep{fill:var(--a); opacity:.10; stroke:none; animation:tmail-sweep 4s ease-in-out infinite}
@keyframes tmail-sweep{0%{transform:translateX(-30px)}50%{transform:translateX(280px)}100%{transform:translateX(-30px)}}
.tmail-gauge-track{stroke:var(--glass-border-3); stroke-width:9; opacity:.6}
.tmail-gauge-zone{stroke:var(--accent-emerald); stroke-width:9; opacity:.6}
.tmail-gauge-ticks line{stroke:var(--text-dim); stroke-width:1.4}
.tmail-needle{stroke:var(--a); stroke-width:3.5; transform-origin:130px 118px; animation:tmail-needle 1s var(--ease-spring) both}
@keyframes tmail-needle{from{transform:rotate(-78deg)}to{transform:rotate(0)}}
.tmail-needle-hub{fill:var(--a); stroke:none}
.tmail-gauge-val{fill:var(--text-primary); stroke:none; font:700 22px var(--font-display)}
.tmail-floor{stroke:var(--text-dim); stroke-width:1.4; stroke-dasharray:4 4; opacity:.6}
.tmail-floor-lbl{fill:var(--text-dim); stroke:none; font:500 9px var(--font-body)}
.tmail-curve{stroke:var(--a); stroke-width:2.6; stroke-dasharray:1; stroke-dashoffset:1; animation:tmail-draw 1.1s var(--ease-out) .1s forwards}
@keyframes tmail-draw{to{stroke-dashoffset:0}}
.tmail-curve-dot{fill:var(--a); stroke:none; opacity:0; animation:tmail-fadein .4s ease 1s forwards; filter:drop-shadow(0 0 5px var(--a))}
@keyframes tmail-fadein{to{opacity:1}}
.tmail-ph-band{fill:color-mix(in srgb,var(--accent-emerald) 12%, transparent); stroke:none}
.tmail-ph-val{fill:var(--text-primary); stroke:none; font:700 15px var(--font-display)}
.tmail-ppm{stroke:none}
.tmail-ppm-track{fill:var(--glass-2); stroke:var(--glass-border); stroke-width:1}
.tmail-ppm-band{fill:color-mix(in srgb,var(--accent-emerald) 16%, transparent); stroke:none}
.tmail-ppm-fill{fill:var(--a); stroke:none; transform-box:fill-box; transform-origin:bottom; transform:scaleY(0); animation:tmail-merc 1s var(--ease-spring) .15s forwards}
.tmail-ppm-val{fill:var(--text-primary); stroke:none; font:700 16px var(--font-display)}
.tmail-ppm-bandlbl{fill:var(--accent-emerald); stroke:none; font:600 10px var(--font-body)}
/* VPD — leaf over an accurate 0–2.5 kPa scale */
.tmail-vpd{stroke:none}
.tmail-vpd-leaf{fill:color-mix(in srgb,var(--a) 9%, transparent); stroke:var(--a); stroke-width:2; stroke-linejoin:round; stroke-dasharray:1; stroke-dashoffset:1; animation:tmail-draw 1s var(--ease-out) forwards}
.tmail-vpd-vein{fill:none; stroke:var(--a); stroke-width:1.4; opacity:.55; stroke-dasharray:1; stroke-dashoffset:1; animation:tmail-draw 1s var(--ease-out) .25s forwards}
.tmail-vpd-track{stroke:var(--glass-border-3); stroke-width:6; stroke-linecap:round}
.tmail-vpd-band{stroke:color-mix(in srgb,var(--accent-emerald) 42%, transparent); stroke-width:6; stroke-linecap:round}
.tmail-vpd-mark{stroke-width:3; stroke-linecap:round}
.tmail-vpd-dot{stroke:none}
.tmail-vpd-val{stroke:none; font:700 15px var(--font-display)}
.tmail-vpd-end{fill:var(--text-dim); stroke:none; font:600 9px var(--font-body)}
.tmail-vpd-band-lbl{fill:var(--accent-emerald); stroke:none; font:600 9px var(--font-body)}
.tmail-baseline{stroke:var(--text-dim); stroke-width:1.4; opacity:.5}
.tmail-bar{fill:color-mix(in srgb,var(--a) 30%, transparent); stroke:none; transform:scaleY(0); transform-box:fill-box; transform-origin:bottom; animation:tmail-bar-grow .6s var(--ease-out) var(--d) both}
.tmail-bar.hot{fill:var(--a); filter:drop-shadow(0 0 7px color-mix(in srgb,var(--a) 55%, transparent))}
@keyframes tmail-bar-grow{to{transform:scaleY(1)}}
.tmail-leaf-path,.tmail-leaf-vein{stroke:var(--a); stroke-dasharray:1; stroke-dashoffset:1}
.tmail-leaf-path{stroke-width:2.4; fill:color-mix(in srgb,var(--a) 6%, transparent); animation:tmail-draw 1.2s var(--ease-out) forwards}
.tmail-leaf-vein{stroke-width:1.6; opacity:.6; animation:tmail-draw 1.2s var(--ease-out) .3s forwards}
.tmail-vapor circle{fill:var(--a); stroke:none; opacity:0; animation:tmail-vapor 3s ease-in-out infinite}
.tmail-vapor circle:nth-child(2){animation-delay:.6s} .tmail-vapor circle:nth-child(3){animation-delay:1.2s}
@keyframes tmail-vapor{0%{opacity:0; transform:translateY(6px)}40%{opacity:.7}100%{opacity:0; transform:translateY(-14px)}}
.tmail-bellglyph{color:var(--a)}
.tmail-ring{stroke:var(--a); stroke-width:2; opacity:0; transform-box:fill-box; transform-origin:center; animation:tmail-ring 3s ease-out infinite}
.tmail-ring.r2{animation-delay:1.5s}
@keyframes tmail-ring{0%{opacity:.45; transform:scale(.6)}100%{opacity:0; transform:scale(1.6)}}
.tmail-thermo-band{fill:color-mix(in srgb,var(--accent-emerald) 20%, transparent); stroke:none}
.tmail-thermo-tube{fill:var(--glass-2); stroke:var(--glass-border-2); stroke-width:2}
.tmail-thermo-fill{fill:var(--a); stroke:none; transform-box:fill-box; transform-origin:bottom; transform:scaleY(0); animation:tmail-merc 1s var(--ease-spring) .15s forwards}
@keyframes tmail-merc{to{transform:scaleY(1)}}
.tmail-thermo-bulb{fill:var(--a); stroke:none}
.tmail-thermo-val{fill:var(--text-primary); stroke:none; font:700 20px var(--font-display)}
.tmail-drop-outline{fill:none; stroke:var(--a); stroke-width:2.4; stroke-dasharray:1; stroke-dashoffset:1; animation:tmail-draw 1.1s var(--ease-out) forwards}
.tmail-drop-fill{fill:color-mix(in srgb,var(--a) 34%, transparent); stroke:none; transform:translateY(64px); animation:tmail-droprise 1.1s var(--ease-out) .2s forwards}
@keyframes tmail-droprise{to{transform:translateY(0)}}
.tmail-drop-wave{fill:color-mix(in srgb,var(--a) 34%, transparent); stroke:none; opacity:0; animation:tmail-fadein .5s ease .9s forwards}
.tmail-drop-val{fill:var(--text-primary); stroke:none; font:700 20px var(--font-display)}

/* facility tally hero (grouped / brief / recap / equipment / check-up) */
.tmail-facility{stroke:none}
.tmail-fbase{stroke:var(--glass-border-3); stroke-width:1.4; opacity:.7}
.tmail-fcell{fill:color-mix(in srgb,var(--a) 28%, transparent); stroke:color-mix(in srgb,var(--a) 52%, transparent); stroke-width:1; transform-box:fill-box; transform-origin:bottom; transform:scaleY(0); animation:tmail-fcell-in .5s var(--ease-out) var(--d) both}
.tmail-fcell.crit{fill:var(--a); stroke:none; filter:drop-shadow(0 0 6px color-mix(in srgb,var(--a) 55%, transparent))}
@keyframes tmail-fcell-in{to{transform:scaleY(1)}}
.tmail-flabel{fill:var(--text-muted); stroke:none; font:600 10px var(--font-body); font-variant-numeric:tabular-nums}
.tmail-fmore{fill:var(--text-dim); stroke:none; font:600 9px var(--font-body)}
/* done hero (report completed) — semantic emerald, separate from accent */
.tmail-done-ring{fill:color-mix(in srgb,var(--accent-emerald) 12%, transparent); stroke:var(--accent-emerald); stroke-width:2.4}
.tmail-done-check{fill:none; stroke:var(--accent-emerald); stroke-width:3.4; stroke-dasharray:1; stroke-dashoffset:1; animation:tmail-draw .7s var(--ease-out) .2s forwards}
/* report-completed body */
.tmail-quote{padding:11px 13px; border-radius:var(--r-md); background:var(--glass-1); border:1px solid var(--glass-border)}
.tmail-quote b{display:block; font-size:13px; color:var(--text-primary); font-weight:600; margin-bottom:4px}
.tmail-quote p{margin:0; font-size:12.5px; line-height:1.55; color:var(--text-muted)}
.tmail-fixnote{padding:11px 13px; border-radius:var(--r-md); font-size:13px; line-height:1.6; color:var(--text-secondary); background:color-mix(in srgb,var(--accent-emerald) 9%, var(--glass-1)); border:1px solid color-mix(in srgb,var(--accent-emerald) 26%, transparent)}
/* add-back recipe — a dominant accent panel so it's never missed */
.tmail-recipe-panel{margin:16px 18px 0; padding:14px; border-radius:var(--r-lg); background:color-mix(in srgb,var(--a) 8%, var(--glass-1)); border:1px solid color-mix(in srgb,var(--a) 30%, transparent)}
.tmail-recipe-h{display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:11px; font-family:var(--font-display); font-weight:700; font-size:14.5px; letter-spacing:-.01em; color:var(--text-primary)}
.tmail-recipe-n{flex:0 0 auto; font-family:var(--font-body); font-size:11px; font-weight:700; color:var(--a); background:color-mix(in srgb,var(--a) 16%, transparent); padding:3px 10px; border-radius:100px}
.tmail-recipe{display:grid; grid-template-columns:repeat(auto-fill,minmax(88px,1fr)); gap:8px}
.tmail-dose{padding:10px 11px; border-radius:var(--r-md); background:var(--glass-2); border:1px solid var(--glass-border); overflow:hidden}
.tmail-dose-v{display:block; font-family:var(--font-display); font-size:16px; font-weight:700; color:var(--a); font-variant-numeric:tabular-nums; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.tmail-dose-l{font-size:10px; color:var(--text-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
/* REVISED add back — a correction of an earlier one. The panel goes amber to
   read as "changed", and each changed dose is a full-width diff row: old value
   struck → new value + a signed ▲/▼ delta. Unchanged doses drop to the grid. */
.tmail-revised-banner{display:flex; align-items:flex-start; gap:9px; margin:16px 18px 0; padding:11px 13px; border-radius:var(--r-md); background:color-mix(in srgb,var(--accent-amber,#fbbf24) 12%, var(--glass-2)); border:1px solid color-mix(in srgb,var(--accent-amber,#fbbf24) 30%, transparent); font-size:13px; line-height:1.5; color:var(--text-secondary)}
.tmail-revised-banner svg{color:var(--accent-amber,#fbbf24); flex:0 0 auto; margin-top:1px}
.tmail-revised-banner b{color:var(--text-primary)}
.tmail-recipe-panel.is-revised{background:color-mix(in srgb,var(--accent-amber,#fbbf24) 8%, var(--glass-1)); border-color:color-mix(in srgb,var(--accent-amber,#fbbf24) 34%, transparent)}
.tmail-recipe-panel.is-revised .tmail-recipe-n{color:var(--accent-amber,#fbbf24); background:color-mix(in srgb,var(--accent-amber,#fbbf24) 16%, transparent)}
.tmail-diffs{display:flex; flex-direction:column; gap:8px}
.tmail-diff{display:flex; align-items:center; justify-content:space-between; gap:10px 12px; padding:10px 12px; border-radius:var(--r-md); background:var(--glass-2); border:1px solid var(--glass-border); flex-wrap:wrap}
.tmail-diff-l{font-size:12.5px; font-weight:700; color:var(--text-secondary); flex:0 0 auto}
.tmail-diff-v{display:inline-flex; align-items:center; gap:8px; flex-wrap:wrap; margin-left:auto; font-variant-numeric:tabular-nums}
.tmail-diff-was{color:var(--text-dim); text-decoration-thickness:1px; font-size:13px}
.tmail-diff-arr{color:var(--text-muted); font-weight:700}
.tmail-diff-now{font-family:var(--font-display); font-size:15.5px; font-weight:700; color:var(--text-primary)}
.tmail-delta{font-size:11px; font-weight:800; padding:2px 8px; border-radius:100px; letter-spacing:.01em; font-variant-numeric:tabular-nums}
.tmail-delta.d-up{color:var(--accent-emerald,#34d399); background:color-mix(in srgb,var(--accent-emerald,#34d399) 15%, transparent)}
.tmail-delta.d-down{color:var(--accent-rose,#fb7185); background:color-mix(in srgb,var(--accent-rose,#fb7185) 15%, transparent)}
.tmail-delta.d-flat{color:var(--text-muted); background:var(--glass-2)}
.tmail-recipe-sub{margin:13px 0 8px; font-size:11px; font-weight:700; color:var(--text-dim)}
/* WITHDRAWN add back — an admin recalled a mis-send. Rose alert banner; the
   recalled recipe is shown muted + struck so the employee sees what NOT to apply. */
.tmail-withdrawn-banner{display:flex; align-items:flex-start; gap:9px; margin:16px 18px 0; padding:12px 14px; border-radius:var(--r-md); background:color-mix(in srgb,var(--accent-rose,#fb7185) 13%, var(--glass-2)); border:1px solid color-mix(in srgb,var(--accent-rose,#fb7185) 34%, transparent); font-size:13px; line-height:1.5; color:var(--text-secondary)}
.tmail-withdrawn-banner svg{color:var(--accent-rose,#fb7185); flex:0 0 auto; margin-top:1px}
.tmail-withdrawn-banner b{color:var(--text-primary)}
.tmail-recipe-panel.is-withdrawn{background:color-mix(in srgb,var(--accent-rose,#fb7185) 5%, var(--glass-1)); border-color:color-mix(in srgb,var(--accent-rose,#fb7185) 22%, transparent); opacity:.72}
.tmail-recipe-panel.is-withdrawn .tmail-recipe-h{color:var(--text-secondary)}
.tmail-recipe-panel.is-withdrawn .tmail-recipe-n{color:var(--accent-rose,#fb7185); background:color-mix(in srgb,var(--accent-rose,#fb7185) 14%, transparent)}
.tmail-recipe-panel.is-withdrawn .tmail-dose-v{color:var(--text-muted); text-decoration:line-through; text-decoration-color:color-mix(in srgb,var(--accent-rose,#fb7185) 60%, transparent)}
/* message / note from the admin — a prominent panel, not a quiet label */
.tmail-msg{margin:16px 18px 0; padding:14px 15px; border-radius:var(--r-lg); background:color-mix(in srgb,var(--a) 7%, var(--glass-2)); border:1px solid color-mix(in srgb,var(--a) 26%, transparent)}
.tmail-msg-h{display:flex; align-items:center; gap:7px; font-size:11.5px; font-weight:700; letter-spacing:.02em; color:var(--a); margin-bottom:9px}
.tmail-msg-h svg{color:var(--a); flex:0 0 auto}
.tmail-msg-body{margin:0; font-size:15px; line-height:1.6; color:var(--text-primary); font-weight:500}

@media (prefers-reduced-motion: reduce){
  .tmail-overlay, .tmail-card{transition:none}
  .tmail-cell rect,.tmail-cell-dot,.tmail-sweep,.tmail-needle,.tmail-curve,.tmail-curve-dot,.tmail-bar,.tmail-leaf-path,.tmail-leaf-vein,.tmail-vapor circle,.tmail-ring,.tmail-thermo-fill,.tmail-drop-fill,.tmail-drop-wave,.tmail-drop-outline,.tmail-fcell,.tmail-done-check,.tmail-ppm-fill,.tmail-vpd-leaf,.tmail-vpd-vein{animation:none !important; opacity:1; transform:none; stroke-dashoffset:0}
}
@media (max-width:480px){ .tmail-actions{flex-direction:column} .tmail-gb-row{grid-template-columns:8px 1fr auto} .tmail-gb-msg{display:none} }