/* =========================================================================
   tebIQ Design System — Foundations
   Premium, cinematic, medical-grade. Apple-inspired restraint.
   ========================================================================= */

/* ---- Fonts -------------------------------------------------------------- */
/* Primary: Inter (Apple SF Pro feel, broad weight range).
   Mono:    JetBrains Mono (technical / AI details).
   FLAG: SF Pro Display is the spec preference. Inter is the closest
   open-source match available on Google Fonts; substitute SF Pro Display
   if you have a license. */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap");

/* Form controls do NOT inherit fonts per CSS spec — without this, every button/input
   renders UA-default Arial while the body is Inter (QA D3, incl. the prod login page).
   Elements with their own explicit font-family rules (note sheet serif, mono, calc) win. */
button, input, select, textarea { font: inherit; }

:root {
  --warn-bg: #fff8e1; /* orders/warning boxes; dark override below (QA D2) */
  /* ===== Color — Light (default) ====================================== */

  /* Surfaces — neutrals warm only by a hair, never bluish */
  --bg:                 #FFFFFF;
  --bg-elevated:        #FAFAFA;
  --bg-muted:           #F5F5F7;       /* Apple-style tray gray */
  --bg-sunken:          #EFEFF2;

  /* Text */
  --fg:                 #1D1D1F;       /* primary */
  --fg-secondary:       #6E6E73;       /* subhead, paragraph */
  --fg-tertiary:        #A1A1A6;       /* captions, hints */
  --fg-quaternary:      #C7C7CC;       /* placeholder */

  /* Borders / hairlines */
  --border:             rgba(0, 0, 0, 0.08);
  --border-strong:      rgba(0, 0, 0, 0.14);
  --border-subtle:      rgba(0, 0, 0, 0.04);

  /* Brand & semantic accents */
  --accent:             #0A84FF;       /* medical-trust blue, slightly deeper than Apple system blue */
  --accent-hover:       #0066D6;
  --accent-pressed:     #0059BD;
  --accent-soft:        rgba(10, 132, 255, 0.12);
  --accent-foreground:  #FFFFFF;

  --ai:                 #5E5CE6;       /* AI indigo */
  --ai-soft:            rgba(94, 92, 230, 0.12);

  --success:            #30A46C;       /* calmer than #30D158 for medical context */
  --success-soft:       rgba(48, 164, 108, 0.12);
  --warning:            #E5A100;
  --warning-soft:       rgba(229, 161, 0, 0.12);
  --error:              #E5484D;       /* calm red, not aggressive */
  --error-soft:         rgba(229, 72, 77, 0.10);

  /* Cinematic backgrounds */
  --glow-blue:          radial-gradient(circle at 50% 50%, rgba(10,132,255,0.18), transparent 60%); /* @kind color */
  --glow-ai:            radial-gradient(circle at 50% 50%, rgba(94,92,230,0.20), transparent 65%); /* @kind color */
  --gradient-ai:        linear-gradient(135deg, #0A84FF 0%, #5E5CE6 100%); /* @kind color */
  --gradient-silver:    linear-gradient(180deg, #F5F5F7 0%, #E5E5EA 100%); /* @kind color */

  /* ===== Typography ================================================== */
  --font-sans:          "Inter", -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", system-ui, sans-serif;
  --font-mono:          "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;

  /* Scale — display through caption */
  --fs-hero:            clamp(38px, 7vw, 96px); /* @kind font */
  --fs-display:         clamp(32px, 5vw, 64px); /* @kind font */
  --fs-h1:              clamp(28px, 4vw, 48px); /* @kind font */
  --fs-h2:              clamp(24px, 3vw, 36px); /* @kind font */
  --fs-h3:              22px; /* @kind font */
  --fs-h4:              18px; /* @kind font */
  --fs-lead:            clamp(19px, 1.5vw, 24px); /* @kind font */
  --fs-body:            17px; /* @kind font */
  --fs-body-sm:         15px; /* @kind font */
  --fs-caption:         13px; /* @kind font */
  --fs-micro:           11px; /* @kind font */

  --lh-hero:            1.02; /* @kind font */
  --lh-display:         1.06; /* @kind font */
  --lh-heading:         1.15; /* @kind font */
  --lh-body:            1.55; /* @kind font */
  --lh-tight:           1.25; /* @kind font */

  --tracking-hero:      -0.04em; /* @kind font */
  --tracking-display:   -0.03em; /* @kind font */
  --tracking-heading:   -0.02em; /* @kind font */
  --tracking-body:      -0.005em; /* @kind font */
  --tracking-caption:   0.01em; /* @kind font */
  --tracking-eyebrow:   0.12em;        /* uppercase eyebrows @kind font */

  --fw-light:           300; /* @kind font */
  --fw-regular:         400; /* @kind font */
  --fw-medium:          500; /* @kind font */
  --fw-semibold:        600; /* @kind font */
  --fw-bold:            700; /* @kind font */

  /* ===== Spacing (8pt) =============================================== */
  --space-xs:           4px;
  --space-sm:           8px;
  --space-md:           16px;
  --space-lg:           24px;
  --space-xl:           32px;
  --space-2xl:          48px;
  --space-3xl:          64px;
  --space-4xl:          96px;
  --space-5xl:          128px;

  /* ===== Radius ====================================================== */
  --radius-xs:          6px;
  --radius-sm:          10px;
  --radius-md:          14px;
  --radius-lg:          20px;
  --radius-xl:          28px;
  --radius-2xl:         36px;
  --radius-pill:        999px;

  /* ===== Shadows / Elevation ========================================= */
  --shadow-xs:          0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-sm:          0 4px 12px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-md:          0 12px 40px rgba(0, 0, 0, 0.08);
  --shadow-lg:          0 24px 70px rgba(0, 0, 0, 0.12);
  --shadow-xl:          0 40px 120px rgba(0, 0, 0, 0.18);
  --shadow-glow-blue:   0 40px 120px rgba(10, 132, 255, 0.25);
  --shadow-glow-ai:     0 40px 120px rgba(94, 92, 230, 0.28);
  --shadow-focus:       0 0 0 4px rgba(10, 132, 255, 0.18);

  /* ===== Motion ====================================================== */
  --ease-out:           cubic-bezier(0.16, 1, 0.3, 1); /* @kind other */
  --ease-spring:        cubic-bezier(0.34, 1.56, 0.64, 1); /* @kind other */
  --ease-in-out:        cubic-bezier(0.65, 0, 0.35, 1); /* @kind other */

  --dur-fast:           180ms; /* @kind other */
  --dur-normal:         300ms; /* @kind other */
  --dur-slow:           600ms; /* @kind other */
  --dur-cinematic:      1000ms; /* @kind other */

  /* ===== Glass / Blur ================================================ */
  --glass-light:        rgba(255, 255, 255, 0.72); /* @kind color */
  --glass-light-strong: rgba(255, 255, 255, 0.85); /* @kind color */
  --glass-dark:         rgba(0, 0, 0, 0.72); /* @kind color */
  --blur-sm:            blur(10px); /* @kind other */
  --blur-md:            blur(20px); /* @kind other */
  --blur-lg:            blur(40px); /* @kind other */

  /* ===== Layout ====================================================== */
  --max-content:        1280px; /* @kind spacing */
  --max-prose:          760px; /* @kind spacing */
  --max-wide:           1440px; /* @kind spacing */
  --nav-h:              64px; /* @kind spacing */
}

/* ---- Dark mode --------------------------------------------------------- */
:root[data-theme="dark"],
.theme-dark {
  --warn-bg:            rgba(229, 161, 0, 0.14); /* QA D2: amber tint that keeps dark text readable */
  --bg:                 #000000;
  --bg-elevated:        #111113;
  --bg-muted:           #1C1C1E;
  --bg-sunken:          #0A0A0B;

  --fg:                 #F5F5F7;
  --fg-secondary:       #A1A1A6;
  --fg-tertiary:        #6E6E73;
  --fg-quaternary:      #48484A;

  --border:             rgba(255, 255, 255, 0.10);
  --border-strong:      rgba(255, 255, 255, 0.16);
  --border-subtle:      rgba(255, 255, 255, 0.06);

  --accent:             #0A84FF;
  --accent-hover:       #409CFF;
  --accent-pressed:     #0066D6;
  --accent-soft:        rgba(10, 132, 255, 0.18);

  --glass-light:        rgba(28, 28, 30, 0.72);
  --glass-light-strong: rgba(28, 28, 30, 0.88);

  --shadow-md:          0 12px 40px rgba(0, 0, 0, 0.5);
  --shadow-lg:          0 24px 70px rgba(0, 0, 0, 0.6);
  --shadow-xl:          0 40px 100px rgba(0, 0, 0, 0.7);
}

/* =========================================================================
   Semantic element styles — drop colors_and_type.css into any prototype
   and headings/paragraphs/code will follow the system out of the box.
   ========================================================================= */

html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }

body {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  letter-spacing: var(--tracking-body);
  color: var(--fg);
  background: var(--bg);
}

h1, h2, h3, h4, h5, h6 { color: var(--fg); font-weight: var(--fw-semibold); margin: 0; text-wrap: balance; }

h1 { font-size: var(--fs-h1); line-height: var(--lh-heading); letter-spacing: var(--tracking-display); }
h2 { font-size: var(--fs-h2); line-height: var(--lh-heading); letter-spacing: var(--tracking-heading); }
h3 { font-size: var(--fs-h3); line-height: var(--lh-tight);   letter-spacing: var(--tracking-heading); }
h4 { font-size: var(--fs-h4); line-height: var(--lh-tight);   letter-spacing: var(--tracking-heading); }

.hero        { font-size: var(--fs-hero);    line-height: var(--lh-hero);    letter-spacing: var(--tracking-hero);    font-weight: var(--fw-semibold); }
.display     { font-size: var(--fs-display); line-height: var(--lh-display); letter-spacing: var(--tracking-display); font-weight: var(--fw-semibold); }
.lead        { font-size: var(--fs-lead);    line-height: 1.4;               color: var(--fg-secondary); font-weight: var(--fw-regular); }

p { margin: 0; color: var(--fg-secondary); text-wrap: pretty; }

.eyebrow {
  font-size: var(--fs-caption);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--accent);
}

.caption     { font-size: var(--fs-caption); letter-spacing: var(--tracking-caption); color: var(--fg-tertiary); }
.body-sm     { font-size: var(--fs-body-sm); }

code, kbd, pre, samp { font-family: var(--font-mono); font-size: 0.92em; }
code {
  background: var(--bg-muted);
  padding: 2px 6px;
  border-radius: var(--radius-xs);
  color: var(--fg);
}

a { color: var(--accent); text-decoration: none; transition: color var(--dur-fast) var(--ease-out); }
a:hover { color: var(--accent-hover); }

::selection { background: var(--accent-soft); color: var(--fg); }

/* Focus ring — visible, calm, accessible */
:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
  border-radius: var(--radius-sm);
}

/* Custom clinician action buttons (ub.*) — orange glow so a user's own one-tap
   AI actions stand out from built-in / admin-configured note actions. Orange reads
   distinctly against the medical-trust blue accent in both light and dark themes. */
.ub-glow {
  --ub-orange: #FF7A1A;
  color: var(--ub-orange) !important;
  border-color: var(--ub-orange) !important;
  background: rgba(255, 122, 26, 0.08) !important;
  box-shadow: 0 0 0 1px rgba(255, 122, 26, 0.35), 0 0 10px rgba(255, 122, 26, 0.30);
  transition: box-shadow var(--dur-fast, .15s) var(--ease-out, ease),
              background var(--dur-fast, .15s) var(--ease-out, ease);
}
.ub-glow:hover {
  background: rgba(255, 122, 26, 0.16) !important;
  box-shadow: 0 0 0 1px rgba(255, 122, 26, 0.55), 0 0 16px rgba(255, 122, 26, 0.50);
}
:root[data-theme="dark"] .ub-glow { --ub-orange: #FF9A4D; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .ub-glow { --ub-orange: #FF9A4D; }
}

/* =========================================================================
   Rail feature search (it/nav-search — app-nav-search.js injects the markup)
   The clinician nav rail's "Search features…" input + settings deep-link
   hits. Uses the app-shell variables from index.html (--panel2/--line/--text/
   --muted/--accent), so light and dark both come from the theme, not from
   anything hard-coded here.
   ========================================================================= */
#navSearchWrap { display: flex; flex-direction: column; gap: 6px; min-width: 0; position: relative; }
#navSearch {
  width: 100%; min-height: 40px; padding: 9px 12px; font-size: 14px;
  border-radius: 9px; border: 1px solid var(--line-strong);
  background: var(--panel2); color: var(--text); font-family: inherit;
}
#navSearch::placeholder { color: var(--muted); }
#navSearch:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
/* WebKit's built-in ✕ on type=search is tiny; keep it but give it a cursor. */
#navSearch::-webkit-search-cancel-button { cursor: pointer; }

#navSearchBtn { display: none; }   /* only the collapsed desktop rail shows it */

#navSearchEmpty { font-size: 12.5px; color: var(--muted); padding: 2px 4px; }
#navSearchEmpty a { color: var(--accent); }

/* Settings deep-link hits — quiet rows in the launchpad/sux hit idiom. */
#navSettingsHits { display: flex; flex-direction: column; gap: 3px; }
#navSettingsHits.hidden { display: none; }
.ns-hit {
  display: flex; align-items: center; gap: 9px; width: 100%; min-height: 42px;
  padding: 6px 9px; border-radius: 9px; border: 1px solid var(--line);
  background: var(--panel); color: var(--text); cursor: pointer; text-align: start;
}
.ns-hit:hover { background: var(--panel2); }
.ns-hit:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.ns-hit-ico { font-size: 15px; flex: 0 0 20px; text-align: center; }
.ns-hit-text { display: flex; flex-direction: column; min-width: 0; }
.ns-hit-label { font-size: 13px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ns-hit-sub { font-size: 11px; color: var(--muted); }

/* Live filter: non-matching rail buttons hide; a match inside the collapsed
   ⋯ More group opens the group VISUALLY ONLY (its .hidden class and the
   persisted localStorage state are untouched — clearing the input restores
   the exact prior rail). #id+class outranks .hidden{display:none!important}. */
#appView header .tabs button.ns-hide { display: none !important; }
#navMoreGroup.ns-open { display: flex !important; }
#appView header.ns-active .nav-more-sep { display: none; }

/* Collapsed desktop rail (58px): no room for an input — show a 🔍 rail button
   that expands the rail and focuses the search instead. */
@media (min-width: 1101px) {
  body:not(.nav-expanded) #appView #navSearch,
  body:not(.nav-expanded) #appView #navSettingsHits,
  body:not(.nav-expanded) #appView #navSearchEmpty { display: none; }
  body:not(.nav-expanded) #appView #navSearchBtn {
    display: flex; align-items: center; justify-content: center;
    width: 100%; min-height: 38px; padding: 9px 0; font-size: 16px;
    background: transparent; border: 0; border-radius: 9px;
    color: var(--text); cursor: pointer;
  }
  body:not(.nav-expanded) #appView #navSearchBtn:hover { background: var(--panel2); }
  body:not(.nav-expanded) #appView #navSearchBtn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
}

/* Narrow / top-bar mode: the header is a horizontal bar — keep the input
   compact and float the hit rows below it so the bar's height never jumps. */
@media (max-width: 1100px) {
  #navSearchWrap { flex: 0 1 200px; margin: 0 8px; }
  #navSearch { min-height: 36px; padding: 7px 10px; }
  #navSettingsHits, #navSearchEmpty {
    position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 300;
    background: var(--panel); border: 1px solid var(--line); border-radius: 10px;
    padding: 6px; box-shadow: var(--shadow-card);
  }
  #navSearchEmpty.hidden, #navSettingsHits.hidden { display: none; }
}

/* =========================================================================
   Record Note — full-fledged web recorder (it/web-recorder-pro).
   app-capture.js injects the pause button / timer / level meter / recovery
   card into #dictationView, so all markup-free styling lives here. Uses the
   app-shell variables (--panel/--panel2/--line/--text/--muted/--accent/
   --danger) so light and dark both follow the theme.
   ========================================================================= */
.wr-recbtn { min-height: 48px; }
.wr-recbtn.wr-on {
  background: var(--danger) !important;
  border-color: var(--danger) !important;
  color: #fff !important;
  animation: wr-pulse 1.6s ease-in-out infinite;
}
@keyframes wr-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(229, 72, 77, 0.45); }
  50%      { box-shadow: 0 0 0 8px rgba(229, 72, 77, 0); }
}
#wrPauseBtn { min-height: 48px; width: auto; }
.wr-timer {
  font-variant-numeric: tabular-nums;
  font-weight: 700; font-size: 17px; color: var(--text);
}
.wr-timer.wr-live::before {
  content: ""; display: inline-block; width: 9px; height: 9px;
  border-radius: 50%; background: var(--danger); margin-inline-end: 6px;
  vertical-align: baseline;
  animation: wr-blink 1.2s steps(2, start) infinite;
}
@keyframes wr-blink { 50% { opacity: 0.25; } }

/* Input-level meter: a quiet bar that proves the mic is hearing you. */
#wrMeter {
  flex: 1 1 90px; max-width: 220px; height: 8px; border-radius: 999px;
  background: var(--panel2); border: 1px solid var(--line); overflow: hidden;
}
#wrMeter i {
  display: block; height: 100%; width: 0;
  background: var(--accent2, #30A46C);
  transition: width 60ms linear;
}

#wrHint { font-size: 12.5px; margin-top: 8px; }

/* Crash-recovery card — can't-miss but calm. */
.wr-recover {
  display: flex; justify-content: space-between; align-items: center;
  gap: 10px; flex-wrap: wrap; margin: 0 0 14px; padding: 12px 14px;
  border: 1px solid rgba(229, 161, 0, 0.45); border-radius: 12px;
  background: rgba(229, 161, 0, 0.10); color: var(--text);
}
.wr-recover-go {
  background: var(--accent2, #30A46C) !important;
  border-color: var(--accent2, #30A46C) !important;
  color: #fff !important; min-height: 44px;
}
.wr-recover .ghost { min-height: 44px; }

/* Mobile: full-width recording surface, giant thumb targets, controls pinned
   to the bottom of the viewport while a recording is live (one-handed reach). */
@media (max-width: 640px) {
  #dictationView .card.webrec { max-width: none; margin: 0; }
  #dictationView .wr-recbtn { flex: 1 1 100%; min-height: 64px; font-size: 18px; }
  #dictationView #wrPauseBtn { flex: 1 1 46%; min-height: 56px; font-size: 16px; }
  #dictationView .wr-timer { font-size: 22px; }
  #dictationView #wrMeter { flex: 1 1 100%; max-width: none; height: 10px; }
  /* While live, keep Stop/Pause on screen as the clinician scrolls the
     transcript — the controls sit at the top of the card, so pin to the top. */
  body.wr-recording #dictationView .card.webrec .wr-controls {
    position: sticky; top: 0; z-index: 5;
    background: var(--panel); border-bottom: 1px solid var(--line);
    padding: 10px 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .wr-recbtn.wr-on, .wr-timer.wr-live::before { animation: none; }
  #wrMeter i { transition: none; }
}

/* ===== Notes & Export personalization (app-noteprefs.js, it/note-export-prefs) =====
   Paper presets are scoped to the NOTE SHEET ONLY (never global theme vars);
   dark_read is the founder-sanctioned exception to "paper stays light in dark
   mode". Selectors out-rank the inline #tabNote sheet block in index.html via
   the extra html[data-notepaper] attribute. No attribute = cream (unchanged). */
html[data-notepaper="white"] #tabNote #sectionsPane.wa-sheet { background: #FFFFFF; border-color: #E5E7EB; }
html[data-notepaper="soft_gray"] #tabNote #sectionsPane.wa-sheet { background: #EEF0F3; border-color: #DCE0E6; }
html[data-notepaper="dark_read"] #tabNote #sectionsPane.wa-sheet { background: #20262E; border-color: #39414C; }
html[data-notepaper="dark_read"] #tabNote #sectionsPane .docsec-title { color: #E4EAF4; border-bottom-color: rgba(122, 168, 255, 0.45); }
html[data-notepaper="dark_read"] #tabNote #sectionsPane .docsec-body { color: #DFE3E8; }
html[data-notepaper="dark_read"] #tabNote #sectionsPane .docsec-body .subhead { color: #AFC4E8; border-bottom-color: rgba(175, 196, 232, 0.45); }
html[data-notepaper="dark_read"] #tabNote #sectionsPane .docsec-body strong { color: #F1F3F6; }
html[data-notepaper="dark_read"] #tabNote #sectionsPane .docsec-body:focus { background: rgba(255, 255, 255, 0.05); }

/* Accent presets — curated, all alternates ≥4.5:1 white-on-accent (verified in
   test_note_export_prefs.js). html:root out-ranks BOTH the :root and
   :root[data-theme="dark"] --accent definitions in index.html's inline style,
   so one rule per preset covers light and dark. Scope: the accent variables
   only — accent-colored controls pick it up; nothing else changes. */
html:root[data-accent="teal"]   { --accent: #00695C; --accent-hover: #00564B; --accent-pressed: #00473E; --accent-soft: rgba(0, 105, 92, 0.14); }
html:root[data-accent="indigo"] { --accent: #4338CA; --accent-hover: #3730A3; --accent-pressed: #312E81; --accent-soft: rgba(67, 56, 202, 0.14); }
html:root[data-accent="plum"]   { --accent: #7B1FA2; --accent-hover: #6A1B8A; --accent-pressed: #581773; --accent-soft: rgba(123, 31, 162, 0.14); }
html:root[data-accent="forest"] { --accent: #2E6B34; --accent-hover: #26592B; --accent-pressed: #1F4A24; --accent-soft: rgba(46, 107, 52, 0.14); }

/* Settings ▸ Notes & Export card */
.np-sub { font-weight: 700; font-size: 13px; margin: 16px 0 6px; }
.np-toggle { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; font-size: 14px; }
.np-toggle input { width: 18px; height: 18px; flex: none; margin-top: 2px; }
.np-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.np-chip { width: auto; min-height: 34px; padding: 6px 12px; font-size: 13px; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--panel); color: var(--text); cursor: pointer; }
.np-chip.on { border-color: var(--accent); background: var(--accent-soft, rgba(10, 132, 255, 0.12)); font-weight: 700; }
.np-chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.np-swatch .np-dot { display: inline-block; width: 12px; height: 12px; border-radius: 50%; margin-inline-end: 6px; vertical-align: -1px; border: 1px solid rgba(0, 0, 0, 0.2); }
.np-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 640px) { .np-actions { grid-template-columns: 1fr; } }
.np-col-h { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); margin-bottom: 4px; }
.np-act { display: flex; align-items: center; justify-content: space-between; gap: 8px; border: 1px solid var(--line); border-radius: 9px; padding: 6px 8px; margin-bottom: 6px; font-size: 13px; background: var(--panel); }
.np-act button { width: auto; min-height: 32px; white-space: nowrap; }
.np-sig { display: flex; flex-direction: column; gap: 6px; }
.np-sig input { font-size: 14px; }

/* ===== i18n wave 1 (it/web-i18n-core) ==================================== */
/* Note PAPER content keeps its OWN direction regardless of UI language: a
   clinician can write English notes in an Arabic UI and vice versa.
   unicode-bidi:plaintext resolves direction per paragraph from the text
   itself (note_language default "auto") — applies in LTR UIs too, so an
   Arabic note reads right-to-left inside an English UI. */
.docsec-body, .wa-doctitle, #transcript, #priorContext, #transcript2,
#transcriptPane, .dictation-text,
/* Scratchpad free-text + its timestamped timeline entries are note content
   (they fold into the chart), so they resolve direction from the text itself —
   an English jot in a Farsi UI must read LTR, exactly like the note paper. */
#spEntry, .wa-rail .rail-item { unicode-bidi: plaintext; }
#spEntry { text-align: start; }

/* ===== i18n wave 3 (it/content-direction) ================================
   Completes the wave-1 rule above. Same policy — UI CHROME follows the UI
   locale, CONTENT follows its own language — applied to the content surfaces
   wave 1 missed. Two mechanisms, and the choice between them is NOT stylistic:

   (a) unicode-bidi:plaintext + text-align:start — used wherever the content is
       TEXT inside a box. plaintext re-derives the base direction per bidi
       PARAGRAPH from the text itself (Unicode P2/P3), so one container holding
       an English line and a Farsi line renders each correctly. Numbers and
       units ("BP 120/80") do not reorder, because the paragraph resolves LTR
       from its first strong character and the digits are simply LTR runs in it.
       text-align:start is carried alongside because under plaintext it
       resolves against the PARAGRAPH's direction, not the inherited one — it is
       what actually pulls an English line back to the left edge in a Farsi UI.
   (b) dir="auto" on the generated node (app-note.js, on .docsec-head) — used
       ONLY where the wrong thing is BOX ORDER rather than text flow. The
       `direction` property drives flex/grid item order, and unicode-bidi cannot
       change `direction`. CSS therefore cannot fix a flex row; the dir
       attribute can.

   PLAINTEXT IS NOT INHERITED. unicode-bidi is a non-inherited property, so a
   plaintext container does NOT confer plaintext on its BLOCK children — each
   block child forms its own bidi paragraph and falls back to the inherited
   `direction`. Every rule below that names child elements (.ask-report p, li,
   …) exists for that reason, not for redundancy. Note bodies get away with the
   container alone because mdToHtml() emits inline markup only and .docsec-body
   is white-space:pre-wrap, so its lines are paragraphs of one block. */

/* Note-paper section HEADINGS. The heading NAME is content (it comes from the
   note's template in the note's language), so it resolves from its own text. */
.docsec-title,
/* Sub-headings promoted inside a section body are display:inline-block, which
   makes each its own bidi paragraph — the container's plaintext does not reach
   them (see the non-inheritance note above). */
.docsec-body .subhead,
/* Chart / encounter NAMES in the notes list, the board cards and the rich
   cards — all three render through .wa-note-body > .t. Resolving per .t (not
   per list) is the point: a Farsi chart and an English chart sit in the same
   list and each must read in its own direction. */
.wa-note-body > .t,
/* Private note-to-self on a card: clinician free text, same class as the
   scratchpad — content, not chrome. */
.wa-selfnote,
/* Discharge handout preview (note-tab pane + the /simple handout sections).
   The handout is generated in the PATIENT's language, which is routinely not
   the clinician's UI language — this is the surface where the two differ most. */
#dischargePane, .sm-dc-lang, .sm-dc-lang h3, .sm-dc-lang > div,
/* Ask / Expert answer bodies, and the copy / translate / split / merge PREVIEW
   cards that render inside the same report shell. _askReportHtml() emits real
   BLOCK children (p / li / h1-h3 / blockquote) and the preview cards are bare
   divs, so each is listed — the shell alone would not reach them. Only the
   on-screen preview is styled here; the text put on the clipboard or exported
   is plain text and carries no direction. */
.ask-report, .ask-report p, .ask-report li, .ask-report blockquote,
.ask-report h1, .ask-report h2, .ask-report h3, .ask-report > div,
/* /simple: chart title, list row names, note body + transcript panes. */
#simpleRoot .sm-ed-title, #simpleRoot .sm-r-title,
#simpleRoot #smBody, #simpleRoot #smTranscript {
  unicode-bidi: plaintext;
  text-align: start;
}

/* The wave-1 set above declares plaintext on the note body but never alignment.
   Today that is already correct — text-align's initial value IS start, and under
   plaintext start resolves against the paragraph's own direction — so this line
   changes nothing on its own. It is a GUARD: the note paper is restyled often
   (index.html carries three separate style blocks for it), and the day one of
   them sets an explicit text-align on an ancestor, every English note in a
   Farsi UI would silently flip back to the right edge with no other symptom.
   #plainBody is named alongside the class it already carries because the plain
   dictation path renders the body AS the .docsec-body node, not inside one. */
.docsec-body, #plainBody { text-align: start; }

/* --- RTL overrides (html[dir=rtl] — ar/fa via the locale→dir map). SCOPED
   to the wave-1 surfaces: login card, notes list, note chrome, menus, rail.
   Flex/grid layouts mirror on their own; these fix the PHYSICAL anchors. --- */
/* Login card: the in-field Show/Hide toggle + the forgot-password row
   (both physically positioned inline in index.html, hence !important). */
[dir="rtl"] #pwToggle { right: auto !important; left: 6px !important; }
[dir="rtl"] #password { padding-right: 12px !important; padding-left: 62px; }
[dir="rtl"] #forgotRow { text-align: left !important; }
/* Dropdown menus that anchor to a physical edge. */
[dir="rtl"] .wa-menu { right: auto; left: 0; }
[dir="rtl"] .wa-menu button { text-align: right; }
[dir="rtl"] #listOptsMenu { left: auto !important; right: 0 !important; }
[dir="rtl"] .profile-menu { right: auto; left: 0; }
/* Active-note accent bar (notes list) mirrors to the right edge. */
[dir="rtl"] .wa-note.active::before { left: auto; right: 0; border-radius: 4px 0 0 4px; }
/* Desktop nav rail (>=1101px): rail moves to the RIGHT edge; the fixed
   profile menu + scrim + list re-open tab follow. Widths match index.html. */
@media (min-width: 1101px) {
  [dir="rtl"] header { left: auto; right: 0; border-right: none; border-left: 1px solid var(--line); }
  [dir="rtl"] body { padding-left: 0; padding-right: 58px; }
  [dir="rtl"] body.nav-expanded header { box-shadow: -4px 0 22px rgba(15, 18, 24, 0.18); }
  [dir="rtl"] body.nav-expanded header .nav-more-group { margin-left: 0; margin-right: 9px;
    padding-left: 0; padding-right: 7px; border-left: none; border-right: 2px solid var(--line); }
  [dir="rtl"] header .profile-menu { left: auto !important; right: 64px !important; }
  [dir="rtl"] body.nav-expanded header .profile-menu { left: auto !important; right: 234px !important; }
  [dir="rtl"] .nav-scrim { left: 0; right: 58px; }
  [dir="rtl"] #listTab { left: auto !important; right: 58px !important; }
  [dir="rtl"] #railTab, [dir="rtl"] #assistTab { right: auto !important; left: 0 !important; }
}

/* --- RTL overrides: MAIN NOTE WORKSPACE (wave-2, it/rtl-layout-fix) ----------
   The 3-panel flex (.wa) mirrors on its own — items reverse in an RTL row, so
   list→right, note→center, assist/rail→left. What does NOT mirror is the
   per-component CHROME: panel dividers, accent spines, corner menus, the
   trailing-edge badges pushed with margin-left:auto, absolute-positioned
   overlays, and dropdown text-align. Those use PHYSICAL left/right and looked
   distorted under dir=rtl (dividers on the outer edge, corner menus on the
   wrong side, spines flipped). Each rule below mirrors one such anchor.
   Note PAPER text keeps its own per-paragraph direction (unicode-bidi:plaintext
   above) — untouched here. --- */

/* Panel dividers only exist in the flex-row layout (>=1101px; below that .wa is
   a column and borders are stripped). List sits on the right → its divider must
   face the centre (left); assist/rail sit on the left → divider faces right. */
@media (min-width: 1101px) {
  [dir="rtl"] .wa > .wa-list { border-right: none; border-left: 1px solid var(--line); }
  [dir="rtl"] .wa > .wa-assist { border-left: none; border-right: 1px solid var(--line); }
  [dir="rtl"] .wa > .wa-rail { border-left: none; border-right: 1px solid var(--line); }
}

/* Trailing-edge spacers: margin-left:auto pushes to the LTR (right) end. In RTL
   the trailing end is the left, so release the left auto and take it on the
   right instead. */
[dir="rtl"] .nav-chev,
[dir="rtl"] .mdm-conf,
[dir="rtl"] .ddx-zeroai,
[dir="rtl"] .ddx-tier,
[dir="rtl"] .wa-exported-badge,
[dir="rtl"] .wa-stack-team,
[dir="rtl"] .wa-r-ct,
[dir="rtl"] .wa-r-tbct { margin-left: 0; margin-right: auto; }
[dir="rtl"] #railFinalizeBtn { margin-left: 0 !important; margin-right: auto; }

/* Small icon/label gaps that read on the wrong side when mirrored. */
[dir="rtl"] .nav-badge,
[dir="rtl"] .cg-badge { margin-left: 0; margin-right: 5px; }
[dir="rtl"] .rail-ts { margin-right: 0; margin-left: 6px; }

/* Dropdown / list-row / table text alignment: start from the reading edge. */
[dir="rtl"] .pm-item,
[dir="rtl"] .profile-btn,
[dir="rtl"] .sux-row,
[dir="rtl"] .sux-hit,
[dir="rtl"] .cg-tile,
[dir="rtl"] .wa-r-teamopt,
[dir="rtl"] .nav-more-group button,
[dir="rtl"] th, [dir="rtl"] td { text-align: right; }

/* Accent spines / borders that mark the leading edge of a card. */
[dir="rtl"] .ddx-card { border-left: 1px solid var(--line); border-right: 3px solid var(--line); }
[dir="rtl"] .ddx-card.t-cm { border-right-color: #B42C2F; }
[dir="rtl"] .ddx-card.t-hi { border-right-color: #E5A100; }
[dir="rtl"] .ddx-card.t-mo { border-right-color: #5b9bd5; }
[dir="rtl"] .ddx-card.t-lo { border-right-color: #9aa0a6; }
[dir="rtl"] .ask-report { border-left: none; border-right: 3px solid var(--ai);
  border-radius: 16px 6px 6px 16px; }
[dir="rtl"] .ask-report blockquote { border-left: none;
  border-right: 3px solid color-mix(in srgb, var(--ai) 35%, var(--line)); }
/* Answer-list indent moves from the <ul> to the <li> (it/content-direction).
   The list gutter has to sit on the same side as the item's marker, and the
   marker follows the ITEM's own direction now that each <li> is dir=auto — so a
   gutter owned by the list would strand the marker whenever an item's language
   differs from the UI. padding-inline-start on the <li> resolves against the
   item, which is the thing that knows its own language. This supersedes the
   wave-2 physical RTL override for these two elements.
   Qualified with .ask-turn (the wrapper every .ask-report render site creates)
   only to out-specify index.html's inline `.ask-report ul{padding-left:22px}` —
   ds.css loads BEFORE that style block, so a bare tie would lose. */
.ask-turn .ask-report ul, .ask-turn .ask-report ol { padding-left: 0; padding-right: 0; }
.ask-turn .ask-report li { padding-inline-start: 22px; }
[dir="rtl"] .wa-r-tbcard { border-left: 1px solid var(--line); border-right: 4px solid var(--muted); }
[dir="rtl"] #calcPanel { border-left: none; border-right: 1px solid var(--line);
  padding-left: 0; padding-right: 14px; }

/* Vertical spines pinned to the physical left edge → pin to the right. */
[dir="rtl"] .wa-stack-spine { left: auto; right: 0; border-radius: 0 14px 14px 0; }
[dir="rtl"] .wa-r-spine,
[dir="rtl"] .wa-r-stack-spine { left: auto; right: 0; }

/* Absolute-positioned corner overlays / badges → mirror to the opposite edge. */
[dir="rtl"] .wa-corner { right: auto; left: 6px; }
[dir="rtl"] .cg-tile-name { padding-right: 0; padding-left: 24px; }
[dir="rtl"] .cg-star { right: auto; left: 11px; }
[dir="rtl"] .profile-dot { right: auto; left: -1px; }
[dir="rtl"] .wa-stack-add { right: auto; left: 8px; }
[dir="rtl"] .wa-cardtop,
[dir="rtl"] .wa-stack-top { padding-right: 0; padding-left: 26px; }
[dir="rtl"] #liveCursorStatus { left: auto; right: 8px; }
[dir="rtl"] .sux-search-ico { left: auto; right: 13px; }

/* List-simple compact cards: the corner + body gutter sit on the right in LTR. */
[dir="rtl"] body.list-simple .wa-note .wa-corner { right: auto; left: 6px; }
[dir="rtl"] body.list-simple .wa-note .wa-note-body { padding-right: 0; padding-left: 36px; }
[dir="rtl"] body.list-simple .wa-notes { padding-right: 0; padding-left: 16px; }
[dir="rtl"] body.list-simple .wa-note { margin-right: 0; margin-left: 0; }

/* Floating scratch dock anchors to the right edge in LTR → left in RTL. */
[dir="rtl"] #scratchDock.scratch-dock { right: auto; left: 18px; }

/* ---------------------------------------------------------------------------
   it/note-area-revamp — remove three tebIQ-rail panels from the clinician note
   view (founder request 2026-07-25): the planned/suggested-orders widget, the
   Orders Console, and the patient discharge-instructions box. UI-ONLY, fully
   reversible: the underlying Orders / Discharge features + endpoints are intact
   (Discharge still ships via the 📑 Create menu + Discharge doc-tab; orders via
   their endpoints) — only these rail cards are hidden. To restore, delete this
   block. The panels' JS still runs harmlessly against the hidden containers, so
   nothing dangles. Hidden in BOTH themes (display, not color).                */
.wa-assist > .wa-panel[data-panel="orders"],
.wa-assist > .wa-panel[data-panel="orders-console"],
.wa-assist > .wa-panel[data-panel="discharge"] { display: none !important; }

/* ===== 🌐 Translate handout — note-rail control + language picker ============
   Rides the sticky #clinicalAlerts rail beside the critical-care / sepsis
   badges (app-note.js _ensureDischargeXlateBtn). Deliberately ACCENT-coloured,
   not the alerts' red: a translated handout is a task, not a warning, and a
   clinician scanning the rail must not read it as a third alarm.
   CONTRAST: --accent (#0A84FF) only reaches 3.65:1 on white, which fails AA for
   this size — so the surface uses --accent-pressed (white on it: 6.6:1 light,
   5.4:1 dark) and accent TEXT uses --accent-hover (5.4:1 on white, 6.7:1 on the
   dark panel). Both are existing theme variables, so light and dark are covered
   without a new token. Sizes are >=40px so a hurried or gloved tap lands.
   Logical properties throughout — ar and fa are shipped locales and this rail
   mirrors.                                                                   */
.wa-xlate-btn {
  width: auto; background: var(--accent-pressed); color: var(--accent-foreground);
  border: 1px solid var(--accent-pressed); border-radius: 9px;
  font-weight: 700; font-size: 12.5px; letter-spacing: .01em;
  padding: 9px 13px; min-height: 40px; cursor: pointer;
  box-shadow: 0 4px 14px var(--accent-soft); white-space: nowrap; line-height: 1.1;
}
.wa-xlate-btn:hover { filter: brightness(1.14); }
.wa-xlate-btn:focus-visible,
.wa-xlate-lang:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
/* The picker reuses .wa-alert-panel for position/backdrop, but its top border is
   the red alert accent there — restate it in the accent colour for this one. */
.wa-alert-panel:has(.wa-xlate-langs) { border-top-color: var(--accent-pressed); }
.wa-alert-panel:has(.wa-xlate-langs) h4 { color: var(--accent-hover); }
.wa-xlate-langs { display: flex; flex-wrap: wrap; gap: 6px; }
/* The panel's footer actions inherit .ghost.small (34px). This picker is used
   mid-shift, sometimes gloved — bring its own actions up to the 40px the
   language chips use. Scoped to this panel so the alert popups keep their look. */
.wa-alert-panel:has(.wa-xlate-langs) .row button { min-height: 40px; padding: 8px 12px; }
.wa-xlate-lang {
  width: auto; min-height: 40px; padding: 8px 12px; cursor: pointer;
  border: 1px solid var(--line-strong); border-radius: 8px;
  background: var(--panel2); color: var(--text);
  font-size: 12.5px; font-weight: 600; line-height: 1.1; white-space: nowrap;
}
.wa-xlate-lang:hover { background: var(--accent-soft); border-color: var(--accent); }
/* Already generated for this chart — the patient's own language usually lands
   here, so it reads as "ready", not as a second-class option. */
.wa-xlate-lang.done {
  background: var(--accent-soft); border-color: var(--accent-pressed);
  color: var(--accent-hover); font-weight: 800;
}
/* Narrow handsets: the rail is only as wide as the sheet, so let the button wrap
   its label instead of pushing the panel off-screen. */
@media (max-width: 420px) {
  .wa-xlate-btn { white-space: normal; max-width: 60vw; }
  .wa-alert-panel { width: 88vw; max-width: 88vw; }
}

/* ── Room / bed picker (it/web-room-picker) ─────────────────────────────────
   Anchored popover replacing the old prompt() on the room badge. Colors are all
   design tokens, so it themes in light and dark with no per-theme rules; the
   grid targets are 44px so a gloved, hurried tap lands. */
.rp-pop {
  position: fixed; z-index: 400; box-sizing: border-box;
  display: flex; flex-direction: column; gap: 8px;
  padding: 12px; overflow-y: auto;
  background: var(--panel); color: var(--text);
  border: 1px solid var(--line-strong); border-radius: 14px;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.28);
}
.rp-pop .rp-head { font-size: 13px; font-weight: 800; letter-spacing: .01em; }
.rp-pop #rpInput {
  width: 100%; box-sizing: border-box; min-height: 44px; padding: 0 12px;
  font-size: 16px; font-weight: 700; text-transform: uppercase;
  background: var(--panel2); color: var(--text);
  border: 1px solid var(--line-strong); border-radius: 10px;
}
.rp-pop #rpInput::placeholder { font-weight: 500; text-transform: none; opacity: .7; }
.rp-pop .rp-sec { font-size: 11px; font-weight: 700; opacity: .65; text-transform: uppercase; }
.rp-pop .rp-grid { display: flex; flex-wrap: wrap; gap: 6px; }
.rp-chip {
  min-width: 44px; min-height: 44px; padding: 0 8px; cursor: pointer;
  font-size: 15px; font-weight: 700; line-height: 1;
  background: var(--panel2); color: var(--text);
  border: 1px solid var(--line-strong); border-radius: 10px;
}
.rp-chip:hover { background: var(--accent-soft); border-color: var(--accent); }
.rp-chip.sel { background: var(--accent); color: var(--accent-foreground); border-color: transparent; }
.rp-pop .rp-foot { display: flex; align-items: center; gap: 8px; padding-top: 2px; }
/* Focus must stay visible for a clinician driving this from the keyboard. */
.rp-pop :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .rp-chip { transition: none; } }

/* ---- Diagram annotation widget (it/diagram-annotation) ---------------------
   Odontogram + body-map click-to-mark panel. Fixed slide-over (not a
   drag-anywhere dock like the ScratchPad) — simplest thing that stays reachable
   on a tablet. self-mounted by web/app-diagram-annotate.js. */
#diagramAnnotatePanel {
  /* z-index 1260: the mobile shell's fixed top bar (#mshBar, app-mobile-shell.js)
     sits at 1250 on narrow widths — below that, the panel's own ✕ close button
     was rendered UNREACHABLE, covered by the app chrome (caught in narrow-width
     verification). Above every app-chrome tier but still under the toast tier
     (~9000+), so a save/error toast stays visible while the panel is open. */
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 1260;
  width: min(440px, 100vw); max-width: 100vw;
  background: var(--panel); border-left: 1px solid var(--line);
  box-shadow: -8px 0 30px rgba(0,0,0,.16);
  display: flex; flex-direction: column;
}
#diagramAnnotatePanel #daHead { padding-top: max(12px, env(safe-area-inset-top, 0px)); }
#diagramAnnotatePanel.hidden { display: none; }
.da-tooth:focus-visible, .da-pin:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.da-editor {
  margin-top: 10px; padding: 10px; border: 1px solid var(--line); border-radius: 10px;
  background: var(--panel2);
}
.da-editor textarea { box-sizing: border-box; border-radius: 8px; border: 1px solid var(--line-strong);
  background: var(--panel); color: var(--text); padding: 8px; font: inherit; resize: vertical; }
.da-list-item {
  display: flex; align-items: center; gap: 8px; padding: 8px 4px; cursor: pointer;
  border-bottom: 1px solid var(--line); min-height: 44px;
}
.da-list-item:last-child { border-bottom: none; }
.da-list-item:hover { background: var(--panel2); }
.da-list-item:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.da-pin { touch-action: none; }
@media (max-width: 520px) {
  #diagramAnnotatePanel { width: 100vw; }
}
@media (prefers-reduced-motion: reduce) {
  #diagramAnnotatePanel { transition: none; }
}

/* ---- Paste format on the note toolbar (it/paste-bar-and-genie) -----------
   Two checkboxes next to Copy. Deliberately quiet — this is a setting parked in
   an action bar, so it must read as a setting and never compete with Copy for
   the eye. Wraps with the bar; the label collapses on narrow screens so the
   boxes themselves survive rather than the row overflowing. */
.wa-pastefmt {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 3px 9px; margin-left: 2px;
  border: 1px solid var(--border); border-radius: 999px;
  font-size: 12px; color: var(--fg-secondary); white-space: nowrap;
}
.wa-pastefmt-lab { font-weight: 600; letter-spacing: .02em; }
.wa-pastefmt label {
  display: inline-flex; align-items: center; gap: 4px;
  cursor: pointer; user-select: none;
}
.wa-pastefmt input[type="checkbox"] { margin: 0; cursor: pointer; }
/* A ticked box is a live change to what lands in the chart — make it legible,
   not decorative. */
.wa-pastefmt label:has(input:checked) { color: var(--fg); font-weight: 700; }
@media (max-width: 720px) { .wa-pastefmt-lab { display: none; } }

/* ---- Ask tebIQ: markdown tables (it/ask-tables) --------------------------
   A clinical answer's natural shape is often a table — drug/reason,
   dose/indication, finding/significance. The renderer had no table support, so
   the pipe rows landed as run-on prose ("| Drug | Reason | |------|--------| |
   Adenosine | …") — the founder's "answers come out broken", 2026-08-12.
   The wrapper scrolls, the TABLE does not shrink: a 2-3 column clinical table on
   a 375px phone panel must scroll inside its own box rather than squeeze columns
   to one character each or push the whole Ask panel sideways. */
.ask-tablewrap {
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  margin: 10px 0; border: 1px solid var(--border); border-radius: 8px;
}
.ask-table { border-collapse: collapse; width: 100%; min-width: 340px; font-size: 13.5px; }
.ask-table th, .ask-table td {
  padding: 7px 10px; text-align: start; vertical-align: top;
  border-bottom: 1px solid var(--border);
}
.ask-table thead th {
  background: var(--bg-muted); font-weight: 700; white-space: nowrap;
  position: sticky; top: 0;
}
.ask-table tbody tr:last-child td { border-bottom: 0; }
/* Zebra striping earns its keep here: these rows are read across, and a
   mis-tracked row in a contraindication table is a clinical error, not a
   cosmetic one. */
.ask-table tbody tr:nth-child(even) { background: color-mix(in srgb, var(--fg) 3%, transparent); }
.ask-report hr {
  border: 0; border-top: 1px solid var(--border); margin: 12px 0;
}

/* Inline diagram embeds ([[diagram:<preset>]] in a section body). An atomic,
   non-editable thumbnail that flows inside the note text. */
.dgram-embed {
  display: inline-block; vertical-align: middle; margin: 2px 4px;
  border: 1px solid var(--line); border-radius: 8px; background: #fff;
  padding: 2px; max-width: 220px; user-select: none;
}
.dgram-embed-img { display: block; max-width: 210px; max-height: 210px; border-radius: 6px; }
.dgram-embed-ph {
  display: inline-block; padding: 6px 10px; font-size: 12px; color: var(--muted);
  background: var(--panel2); border-radius: 6px;
}