/* ============================================================
   Health Road England · Symptom Notes / 病徵點心紙
   Floating entry + drawer tool styles
   - Uses existing site CSS variables (--teal, --coral, --oatmeal, etc.)
   - Floating button sits bottom-LEFT so it never overlaps the
     Buy Me a Coffee button (bottom-right, z-index 9999).
   - Supports prefers-reduced-motion.
   ============================================================ */

/* ---------- Floating entry button ---------- */
.hre-sn-fab{
  position:fixed;
  left:20px;
  bottom:24px;
  z-index:9998; /* deliberately below BMC (9999) */
  display:inline-flex;
  align-items:center;
  gap:9px;
  min-height:54px;
  padding:9px 18px 9px 12px;
  border:2px solid rgba(1,105,111,.28);
  border-radius:999px;
  background:var(--teal,#01696f);
  color:#fff;
  font-family:var(--sans,system-ui,sans-serif);
  font-size:.95rem;
  font-weight:700;
  line-height:1.25;
  cursor:pointer;
  text-align:left;
  box-shadow:0 14px 34px rgba(1,75,80,.30), 0 0 0 3px rgba(255,255,255,.35);
  animation:hre-sn-breathe 6s ease-in-out infinite;
  transition:transform .22s ease, box-shadow .22s ease;
}
.hre-sn-fab:hover,
.hre-sn-fab:focus-visible{
  transform:translateY(-3px);
  box-shadow:0 18px 42px rgba(1,75,80,.36), 0 0 0 4px rgba(255,107,107,.22);
  outline:none;
}
.hre-sn-fab:focus-visible{border-color:var(--coral,#FF6B6B);}
.hre-sn-fab-icon{
  flex:0 0 auto;
  width:32px;height:32px;
  border-radius:50%;
  background:rgba(255,255,255,.16);
  display:flex;align-items:center;justify-content:center;
}
.hre-sn-fab-icon svg{width:19px;height:19px;display:block}
.hre-sn-fab-label{display:flex;flex-direction:column}
.hre-sn-fab-main{font-size:.95rem}
.hre-sn-fab-sub{font-size:.72rem;font-weight:600;opacity:.85;letter-spacing:.02em}
@keyframes hre-sn-breathe{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-4px)}
}

@media (max-width:640px){
  .hre-sn-fab{
    left:12px;
    bottom:14px;
    min-height:48px;
    padding:7px 14px 7px 10px;
  }
  .hre-sn-fab-main{font-size:.86rem}
  .hre-sn-fab-sub{font-size:.66rem}
}

/* ---------- Overlay + drawer ---------- */
.hre-sn-overlay{
  position:fixed;inset:0;
  background:rgba(42,59,60,.45);
  z-index:10000;
  opacity:0;
  pointer-events:none;
  transition:opacity .25s ease;
}
.hre-sn-overlay.open{opacity:1;pointer-events:auto}

.hre-sn-drawer{
  position:fixed;
  top:0;right:0;bottom:0;
  width:min(560px,100%);
  z-index:10001;
  background:var(--warm,#FFFDF8);
  box-shadow:-18px 0 50px rgba(1,75,80,.22);
  display:flex;
  flex-direction:column;
  transform:translateX(102%);
  transition:transform .3s ease;
  font-family:var(--sans,system-ui,sans-serif);
  color:var(--ink,#2A3B3C);
}
.hre-sn-drawer.open{transform:translateX(0)}

@media (max-width:640px){
  .hre-sn-drawer{
    top:auto;left:0;right:0;bottom:0;
    width:100%;
    height:92dvh;
    border-radius:18px 18px 0 0;
    transform:translateY(103%);
  }
  .hre-sn-drawer.open{transform:translateY(0)}
}

/* ---------- Drawer header ---------- */
.hre-sn-head{
  flex:0 0 auto;
  display:flex;align-items:center;gap:12px;
  padding:16px 18px 12px;
  border-bottom:1px solid var(--line,#E2DDD4);
  background:var(--oatmeal,#F7F4EF);
}
.hre-sn-head h2{
  font-size:1.12rem;
  line-height:1.3;
  margin:0;flex:1;
}
.hre-sn-close{
  flex:0 0 auto;
  width:38px;height:38px;
  border-radius:50%;
  border:1.5px solid var(--line,#E2DDD4);
  background:#fff;
  color:var(--ink,#2A3B3C);
  font-size:1.15rem;
  line-height:1;
  cursor:pointer;
  display:flex;align-items:center;justify-content:center;
}
.hre-sn-close:hover,.hre-sn-close:focus-visible{
  border-color:var(--teal,#01696f);
  color:var(--teal,#01696f);
  outline:none;
}

/* ---------- Tabs ---------- */
.hre-sn-tabs{
  flex:0 0 auto;
  display:flex;
  gap:6px;
  padding:10px 14px 0;
  background:var(--oatmeal,#F7F4EF);
  border-bottom:1px solid var(--line,#E2DDD4);
}
.hre-sn-tab{
  flex:1;
  border:1px solid var(--line,#E2DDD4);
  border-bottom:none;
  border-radius:10px 10px 0 0;
  padding:9px 6px;
  background:#efece5;
  color:var(--ink-soft,#5C6B6C);
  font-family:inherit;
  font-size:.82rem;
  font-weight:700;
  cursor:pointer;
  line-height:1.3;
}
.hre-sn-tab[aria-selected="true"]{
  background:var(--warm,#FFFDF8);
  color:var(--teal,#01696f);
  border-color:var(--teal-tint,#cfe3e3);
  position:relative;
}
.hre-sn-tab[aria-selected="true"]::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;
  background:var(--warm,#FFFDF8);
}
.hre-sn-tab:focus-visible{outline:2px solid var(--coral,#FF6B6B);outline-offset:-2px}

/* ---------- Scrollable body ---------- */
.hre-sn-body{
  flex:1 1 auto;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  padding:16px 18px 20px;
}
.hre-sn-panel[hidden]{display:none}

/* ---------- Form fields ---------- */
.hre-sn-field{margin-bottom:20px}
.hre-sn-field-label{
  display:block;
  font-weight:800;
  font-size:.95rem;
  margin-bottom:3px;
  color:var(--teal-dark,#014b50);
}
.hre-sn-field-hint{
  font-size:.8rem;
  color:var(--ink-soft,#5C6B6C);
  margin-bottom:8px;
}
.hre-sn-chips{display:flex;flex-wrap:wrap;gap:8px}
.hre-sn-chip{
  border:1.5px solid var(--line,#E2DDD4);
  background:#fff;
  color:var(--ink,#2A3B3C);
  border-radius:999px;
  padding:7px 14px;
  font-family:inherit;
  font-size:.85rem;
  font-weight:600;
  line-height:1.3;
  cursor:pointer;
  transition:border-color .15s ease, background .15s ease, color .15s ease;
}
.hre-sn-chip:hover{border-color:var(--teal,#01696f)}
.hre-sn-chip:focus-visible{outline:2px solid var(--coral,#FF6B6B);outline-offset:1px}
.hre-sn-chip[aria-pressed="true"]{
  background:var(--teal,#01696f);
  border-color:var(--teal,#01696f);
  color:#fff;
}
.hre-sn-select,
.hre-sn-text{
  width:100%;
  border:1.5px solid var(--line,#E2DDD4);
  border-radius:var(--r-sm,12px);
  padding:10px 12px;
  font-family:inherit;
  font-size:.9rem;
  color:var(--ink,#2A3B3C);
  background:#fff;
}
.hre-sn-select:focus,.hre-sn-text:focus{
  border-color:var(--teal,#01696f);
  outline:none;
}
.hre-sn-two-col{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:480px){.hre-sn-two-col{grid-template-columns:1fr}}
.hre-sn-subhead{
  font-size:.83rem;font-weight:800;color:var(--ink,#2A3B3C);
  margin:6px 0 6px;
}
.hre-sn-privacy-inline{
  font-size:.76rem;
  color:var(--ink-soft,#5C6B6C);
  background:var(--teal-soft,#e6f0f0);
  border-radius:var(--r-sm,12px);
  padding:9px 12px;
  margin-bottom:18px;
}

/* ---------- Buttons ---------- */
.hre-sn-actions{
  display:flex;flex-wrap:wrap;gap:10px;
  margin-top:6px;
}
.hre-sn-btn{
  border:none;
  border-radius:999px;
  padding:11px 20px;
  font-family:inherit;
  font-size:.9rem;
  font-weight:800;
  cursor:pointer;
  line-height:1.3;
}
.hre-sn-btn:focus-visible{outline:2px solid var(--coral,#FF6B6B);outline-offset:2px}
.hre-sn-btn-primary{background:var(--teal,#01696f);color:#fff}
.hre-sn-btn-primary:hover{background:var(--teal-dark,#014b50)}
.hre-sn-btn-secondary{
  background:#fff;color:var(--teal,#01696f);
  border:1.5px solid var(--teal,#01696f);
}
.hre-sn-btn-secondary:hover{background:var(--teal-soft,#e6f0f0)}
.hre-sn-btn-ghost{
  background:transparent;color:var(--ink-soft,#5C6B6C);
  border:1.5px solid var(--line,#E2DDD4);
}
.hre-sn-btn-ghost:hover{border-color:var(--coral,#FF6B6B);color:var(--coral-dark,#e85555)}

/* ---------- Output ---------- */
.hre-sn-output{
  border:1.5px solid var(--teal-tint,#cfe3e3);
  background:#fff;
  border-radius:var(--r,20px);
  padding:16px 18px;
  margin-bottom:14px;
  white-space:pre-wrap;
  word-break:break-word;
  font-size:.9rem;
  line-height:1.7;
}
.hre-sn-copied{
  display:inline-block;
  font-size:.8rem;font-weight:700;
  color:var(--teal,#01696f);
  margin-left:4px;
}

/* ---------- Glossary tabs ---------- */
.hre-sn-search{margin-bottom:14px}
.hre-sn-gloss-group{margin-bottom:18px}
.hre-sn-gloss-group h3{
  font-size:.95rem;
  color:var(--teal-dark,#014b50);
  margin:0 0 4px;
}
.hre-sn-gloss-note{
  font-size:.76rem;color:var(--ink-soft,#5C6B6C);margin:0 0 8px;
}
.hre-sn-gloss-list{list-style:none;margin:0;padding:0}
.hre-sn-gloss-list li{
  display:flex;
  flex-wrap:wrap;
  gap:4px 12px;
  padding:8px 2px;
  border-bottom:1px dashed var(--line,#E2DDD4);
  font-size:.88rem;
}
.hre-sn-gloss-en{font-weight:700;color:var(--ink,#2A3B3C)}
.hre-sn-gloss-zh{color:var(--ink-soft,#5C6B6C)}
.hre-sn-gloss-safe{
  flex-basis:100%;
  font-size:.78rem;
  color:var(--teal-dark,#014b50);
  background:var(--teal-soft,#e6f0f0);
  border-radius:8px;
  padding:6px 9px;
  margin-top:2px;
}
.hre-sn-gloss-warn{
  flex-basis:100%;
  font-size:.76rem;
  color:#7a4a00;
  background:#fdf3e3;
  border-radius:8px;
  padding:6px 9px;
  margin-top:2px;
}
.hre-sn-gloss-tag{
  font-size:.66rem;font-weight:800;
  color:var(--coral-dark,#e85555);
  border:1px solid var(--coral,#FF6B6B);
  border-radius:999px;
  padding:1px 8px;
  align-self:center;
}
.hre-sn-empty{
  font-size:.85rem;color:var(--ink-soft,#5C6B6C);
  padding:12px 2px;
}

/* ---------- Fixed safety footer ---------- */
.hre-sn-safety{
  flex:0 0 auto;
  border-top:2px solid var(--coral,#FF6B6B);
  background:var(--coral-soft,#fff0f0);
  padding:10px 18px 12px;
  font-size:.76rem;
  line-height:1.55;
  color:var(--ink,#2A3B3C);
}
.hre-sn-safety strong{color:var(--coral-dark,#e85555)}
.hre-sn-safety p{margin:0 0 4px}
.hre-sn-safety p:last-child{margin-bottom:0}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  .hre-sn-fab{animation:none;transition:none}
  .hre-sn-fab:hover,.hre-sn-fab:focus-visible{transform:none}
  .hre-sn-drawer{transition:none}
  .hre-sn-overlay{transition:none}
  .hre-sn-chip{transition:none}
}

/* ---------- Print: only print the generated note ---------- */
#hre-sn-print-area{display:none}
@media print{
  body.hre-sn-printing > *{display:none !important}
  body.hre-sn-printing #hre-sn-print-area{
    display:block !important;
    font-family:Georgia,"Noto Serif TC",serif;
    color:#000;
    font-size:12pt;
    line-height:1.7;
    white-space:pre-wrap;
    word-break:break-word;
    padding:0;
  }
}

/* ---------- Body map (spec §7-8) ---------- */
.hre-sn-map{
  border:1.5px solid var(--teal-tint,#cfe3e3);
  background:#fff;
  border-radius:var(--r,20px);
  padding:12px 14px 10px;
  margin:10px 0 4px;
}
.hre-sn-map-toggle{display:flex;gap:8px;margin-bottom:8px}
.hre-sn-map-view{
  flex:1;
  border:1.5px solid var(--line,#E2DDD4);
  background:#fff;color:var(--ink-soft,#5C6B6C);
  border-radius:999px;padding:7px 10px;
  font-family:inherit;font-size:.84rem;font-weight:700;cursor:pointer;
}
.hre-sn-map-view[aria-pressed="true"]{
  background:var(--teal,#01696f);border-color:var(--teal,#01696f);color:#fff;
}
.hre-sn-map-view:focus-visible{outline:2px solid var(--coral,#FF6B6B);outline-offset:1px}
.hre-sn-map-svg{display:flex;justify-content:center}
.hre-body-map{width:100%;max-width:250px;height:auto;display:block}
.hre-sn-zone{
  fill:transparent;
  stroke:transparent;
  cursor:pointer;
}
.hre-sn-zone:hover{fill:rgba(1,105,111,.20)}
.hre-sn-zone:focus{fill:rgba(1,105,111,.20);outline:none;stroke:var(--teal,#01696f);stroke-width:1.5;stroke-dasharray:4 3}
.hre-sn-zone-active{fill:rgba(255,107,107,.38)}
.hre-sn-map-menu{
  border-top:1px dashed var(--line,#E2DDD4);
  margin-top:10px;padding-top:10px;
}
.hre-sn-map-menu-title{
  font-size:.85rem;font-weight:800;color:var(--teal-dark,#014b50);
  margin-bottom:8px;
}
.hre-sn-map-menu-close{margin-top:10px;padding:7px 14px;font-size:.8rem}
.hre-sn-map-note{
  font-size:.72rem;color:var(--ink-soft,#5C6B6C);
  margin:8px 0 0;line-height:1.5;
}
.hre-sn-map-picked{
  font-size:.86rem;font-weight:700;color:var(--teal-dark,#014b50);
  background:var(--teal-soft,#e6f0f0);
  border-radius:var(--r-sm,12px);
  padding:9px 12px;margin:10px 0 14px;
}

/* ---------- Location chips (field 2) ---------- */
.hre-sn-loc-chips{
  display:flex;flex-wrap:wrap;gap:8px;
  margin-bottom:10px;min-height:24px;align-items:center;
}
.hre-sn-loc-chip{
  display:inline-flex;align-items:center;gap:7px;
  background:var(--teal,#01696f);color:#fff;
  border-radius:999px;padding:6px 8px 6px 14px;
  font-size:.83rem;font-weight:700;line-height:1.3;
}
.hre-sn-loc-remove{
  border:none;background:rgba(255,255,255,.22);color:#fff;
  width:20px;height:20px;border-radius:50%;
  font-size:.9rem;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
}
.hre-sn-loc-remove:hover,.hre-sn-loc-remove:focus-visible{
  background:var(--coral,#FF6B6B);outline:none;
}

@media (prefers-reduced-motion:reduce){
  .hre-sn-map-view{transition:none}
}

/* ---------- Zoomed hand / foot view (second layer) ---------- */
.hre-sn-zoom-svg{display:flex;justify-content:center;margin:4px 0 10px}
.hre-body-zoom{width:100%;max-width:210px;height:auto;display:block}

/* ---------- In-place zoom: hand/foot fills the map area ---------- */
.hre-sn-map-zoomhead{
  display:flex;align-items:center;gap:10px;
  margin-bottom:8px;flex-wrap:wrap;
}
.hre-sn-map-zoomhead[hidden]{display:none}
.hre-sn-map [hidden]{display:none !important}
.hre-sn-map-backbtn{
  border:1.5px solid var(--teal,#01696f);
  background:#fff;color:var(--teal,#01696f);
  border-radius:999px;padding:7px 14px;
  font-family:inherit;font-size:.82rem;font-weight:800;cursor:pointer;
}
.hre-sn-map-backbtn:hover,.hre-sn-map-backbtn:focus-visible{
  background:var(--teal-soft,#e6f0f0);outline:none;
}
.hre-sn-map-backbtn:focus-visible{outline:2px solid var(--coral,#FF6B6B);outline-offset:1px}
.hre-sn-map-zoomtitle{
  font-size:.9rem;font-weight:800;color:var(--teal-dark,#014b50);
}
.hre-body-zoom-large{
  width:100%;
  max-width:340px;
  height:auto;display:block;
  animation:hre-sn-zoomin .28s ease;
  transform-origin:center 30%;
}
@keyframes hre-sn-zoomin{
  from{transform:scale(.45);opacity:.35}
  to{transform:scale(1);opacity:1}
}
@media (prefers-reduced-motion:reduce){
  .hre-body-zoom-large{animation:none}
}

/* ---------- Hand zoom sub-view toggle (手背/手掌) ---------- */
.hre-sn-zoomview-toggle{max-width:340px;margin:0 auto 8px}

/* ---------- HRE stable hand selector (replaces fragile detailed hand SVG) ---------- */
.hre-hand-selector{
  --hre-hand-teal:var(--teal,#01696f);
  --hre-hand-teal-dark:var(--teal-dark,#014b50);
  --hre-hand-teal-soft:var(--teal-soft,#e6f0f0);
  --hre-hand-teal-pale:#f1f8f7;
  --hre-hand-fill:#d5e8e8;
  --hre-hand-border:var(--line,#d8d1c6);
  --hre-hand-text:var(--ink,#263b3d);
  --hre-hand-muted:var(--ink-soft,#5C6B6C);
  width:100%;max-width:430px;margin:0 auto 10px;
  background:#fff;border:1px solid var(--hre-hand-border);
  border-radius:18px;padding:16px;color:var(--hre-hand-text);
}
.hre-hand-selector__header{margin-bottom:12px;text-align:left}
.hre-hand-selector__title{margin:0 0 5px;font-size:1rem;line-height:1.3;color:var(--hre-hand-teal-dark);font-weight:900}
.hre-hand-selector__hint{margin:0;font-size:.84rem;line-height:1.45;color:var(--hre-hand-muted)}
.hre-hand-surface-toggle{
  display:grid;grid-template-columns:1fr 1fr;gap:7px;
  padding:6px;margin:12px 0 14px;
  background:var(--hre-hand-teal-pale);border:1px solid #c8dddd;border-radius:999px;
}
.hre-hand-surface-toggle__button{
  border:0;border-radius:999px;padding:9px 10px;
  background:transparent;color:var(--hre-hand-teal-dark);
  font-family:inherit;font-size:.86rem;font-weight:900;line-height:1.2;cursor:pointer;
}
.hre-hand-surface-toggle__button:hover,
.hre-hand-surface-toggle__button:focus-visible{
  background:rgba(1,105,111,.12);outline:none;box-shadow:0 0 0 3px rgba(1,105,111,.14);
}
.hre-hand-surface-toggle__button.is-selected{background:var(--hre-hand-teal);color:#fff;box-shadow:0 2px 8px rgba(1,80,84,.18)}
.hre-hand-visual{display:grid;justify-items:center;gap:7px;margin:8px 0 14px}
.hre-hand-visual__svg{width:min(168px,56vw);height:auto;display:block}
.hre-hand-visual__shape rect{fill:var(--hre-hand-fill);stroke:rgba(1,105,111,.38);stroke-width:2}
.hre-hand-visual__lines path{fill:none;stroke:rgba(1,105,111,.55);stroke-width:4;stroke-linecap:round}
.hre-hand-visual__caption{max-width:330px;text-align:center;font-size:.76rem;line-height:1.42;color:var(--hre-hand-muted)}
.hre-hand-chip-grid{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px;justify-content:flex-start}
.hre-hand-chip{
  min-height:42px;border:1px solid #c8dddd;border-radius:999px;
  padding:9px 13px;background:#fff;color:var(--hre-hand-teal-dark);
  font-family:inherit;font-size:.84rem;font-weight:850;line-height:1.2;cursor:pointer;
  display:inline-flex;align-items:center;gap:6px;
}
.hre-hand-chip--surface{border-color:rgba(1,105,111,.42);background:var(--hre-hand-teal-pale)}
.hre-hand-chip:hover,
.hre-hand-chip:focus-visible{border-color:var(--hre-hand-teal);background:var(--hre-hand-teal-pale);outline:none;box-shadow:0 0 0 3px rgba(1,105,111,.13)}
.hre-hand-chip.is-selected{border-color:var(--hre-hand-teal);background:var(--hre-hand-teal);color:#fff}
.hre-hand-chip__pronunciation-slot{display:none}
.hre-hand-selector__selected{margin:12px 0 0;padding:9px 11px;border-radius:12px;background:var(--hre-hand-teal-pale);color:var(--hre-hand-teal-dark);font-size:.84rem;line-height:1.45;font-weight:750}
.hre-hand-selector__selected:empty{display:none}
@media(max-width:480px){
  .hre-hand-selector{padding:14px;border-radius:16px;max-width:100%}
  .hre-hand-surface-toggle{border-radius:16px}
  .hre-hand-surface-toggle__button{border-radius:12px;padding:10px 8px;font-size:.82rem}
  .hre-hand-chip-grid{gap:7px}
  .hre-hand-chip{min-height:44px;padding:9px 12px;font-size:.8rem}
}

/* ---------- Purpose / onboarding copy for Symptom Notes ---------- */
.hre-sn-purpose-card{
  background:linear-gradient(135deg,#fff,var(--teal-soft,#E5F3F3));
  border:1.5px solid var(--teal-tint,#cfe3e3);
  border-left:5px solid var(--teal,#01696f);
  border-radius:16px;
  padding:16px 16px 14px;
  margin:0 0 14px;
  box-shadow:0 10px 24px rgba(1,75,80,.08);
}
.hre-sn-purpose-badge{
  display:inline-flex;
  align-items:center;
  border-radius:999px;
  background:rgba(1,105,111,.1);
  color:var(--teal-dark,#014b50);
  font-size:.72rem;
  font-weight:800;
  letter-spacing:.04em;
  padding:4px 10px;
  margin-bottom:8px;
  text-transform:uppercase;
}
.hre-sn-purpose-title{
  margin:0 0 8px;
  font-size:1.05rem;
  line-height:1.3;
  color:var(--teal-dark,#014b50);
}
.hre-sn-purpose-body{
  margin:0;
  font-size:.9rem;
  line-height:1.62;
  color:var(--ink,#2A3B3C);
}
.hre-sn-purpose-steps{
  display:grid;
  gap:8px;
  margin:12px 0 10px;
}
.hre-sn-purpose-step{
  display:flex;
  align-items:center;
  gap:9px;
  background:rgba(255,255,255,.78);
  border:1px solid rgba(1,105,111,.12);
  border-radius:12px;
  padding:8px 10px;
  color:var(--teal-dark,#014b50);
  font-size:.86rem;
  font-weight:750;
}
.hre-sn-purpose-step-n{
  width:23px;
  height:23px;
  border-radius:50%;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  background:var(--teal,#01696f);
  color:#fff;
  font-size:.78rem;
  font-weight:900;
}
.hre-sn-purpose-note{
  margin:8px 0 0;
  padding-top:9px;
  border-top:1px dashed rgba(1,105,111,.2);
  color:var(--ink-soft,#5C6B6C);
  font-size:.8rem;
  line-height:1.55;
}
.hre-sn-mini-intro{
  background:var(--teal-soft,#E5F3F3);
  border:1px solid var(--teal-tint,#cfe3e3);
  border-radius:13px;
  padding:11px 13px;
  margin:0 0 14px;
  color:var(--teal-dark,#014b50);
  font-size:.86rem;
  line-height:1.55;
  font-weight:650;
}
@media (max-width:480px){
  .hre-sn-purpose-card{padding:14px 13px}
  .hre-sn-purpose-body{font-size:.86rem}
  .hre-sn-purpose-step{font-size:.82rem}
}


/* Pronunciation buttons for Symptom Notes
   Uses browser Web Speech API. No external audio or network request. */
.hre-sn-chip-audio-wrap {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  max-width: 100%;
}

.hre-pronunciation-btn {
  flex: 0 0 auto;
  width: 34px;
  min-width: 34px;
  height: 34px;
  border: 1px solid rgba(0, 107, 111, 0.24);
  border-radius: 999px;
  background: rgba(255,255,255,0.92);
  color: #0f4f52;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font: inherit;
  font-size: 0.92rem;
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(0, 60, 65, 0.08);
  transition: background-color 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}

.hre-pronunciation-btn:hover,
.hre-pronunciation-btn:focus-visible {
  background: #edf7f6;
  border-color: #006b6f;
  outline: none;
  box-shadow: 0 0 0 3px rgba(0, 107, 111, 0.14);
}

.hre-pronunciation-btn:active {
  transform: translateY(1px);
}

.hre-sn-gloss-list .hre-pronunciation-btn {
  margin: 0 6px;
  width: 30px;
  min-width: 30px;
  height: 30px;
  font-size: 0.84rem;
  vertical-align: middle;
}

.hre-hand-chip-audio-wrap .hre-pronunciation-btn {
  width: 34px;
  min-width: 34px;
  height: 34px;
}

@media (max-width: 480px) {
  .hre-sn-chip-audio-wrap {
    gap: 3px;
  }

  .hre-pronunciation-btn {
    width: 36px;
    min-width: 36px;
    height: 36px;
  }
}


/* Category labels inside symptom note chip groups */
.hre-sn-chip-category {
  flex: 0 0 100%;
  margin: 14px 0 2px;
  padding: 7px 10px;
  border-left: 4px solid #006b6f;
  border-radius: 10px;
  background: rgba(0, 107, 111, 0.08);
  color: #0f4f52;
  font-weight: 800;
  font-size: 0.9rem;
  letter-spacing: 0.01em;
}

.hre-sn-chip-category:first-child {
  margin-top: 4px;
}

html[data-lang="en"] .hre-sn-chip-category .zh,
html[lang^="en"] .hre-sn-chip-category .zh {
  display: none;
}

html[data-lang="zh"] .hre-sn-chip-category .en,
html[lang^="zh"] .hre-sn-chip-category .en {
  display: none;
}


/* Chinese free-text note -> English word suggestions */
.hre-translate-helper {
  margin: -4px 0 16px;
  padding: 10px 12px;
  border: 1px dashed rgba(0, 107, 111, 0.28);
  border-radius: 14px;
  background: rgba(237, 247, 246, 0.65);
}

.hre-translate-btn {
  width: 100%;
  justify-content: center;
}

.hre-translate-result {
  margin-top: 10px;
}

.hre-translate-result:empty {
  display: none;
}

.hre-translate-title {
  margin: 0 0 5px;
  color: #0f4f52;
  font-weight: 800;
  font-size: 0.92rem;
}

.hre-translate-note {
  margin: 0 0 8px;
  color: #5f7173;
  font-size: 0.84rem;
  line-height: 1.45;
}

.hre-translate-empty {
  color: #5f7173;
  font-size: 0.9rem;
  line-height: 1.45;
}

.hre-translate-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 7px;
}

.hre-translate-list li {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
  padding: 8px 10px;
  border: 1px solid rgba(0, 107, 111, 0.16);
  border-radius: 12px;
  background: #fff;
}

.hre-translate-en {
  color: #0f4f52;
  font-weight: 800;
}

.hre-translate-zh {
  color: #5f7173;
  font-size: 0.9rem;
}

@media (max-width: 480px) {
  .hre-translate-helper {
    padding: 9px;
  }

  .hre-translate-list li {
    gap: 6px;
  }
}


/* Approved term bank category badge */
.hre-translate-cat {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(0, 107, 111, 0.10);
  color: #0f4f52;
  font-size: 0.78rem;
  font-weight: 800;
}