/* =====================================================================
   COGNEUS / ACUITYCLAIM — SHARED UI STYLES
   =====================================================================
   One stylesheet for every page and for both light and dark modes.
   It contains NO literal palette colors: everything resolves through the
   tokens defined by the active theme (config/themes/theme-*.css), so a
   theme only has to supply tokens to restyle the whole app.

   Load order in each page <head>:
     1. <link id="theme-stylesheet"> (tokens)
     2. <link href="config/ui-common.css"> (this file)
     3. the page's own <style> (rules unique to that page)
   ===================================================================== */

/* Fallbacks so a theme that omits a mode-aware token still renders. */
:root{--overlay:rgba(0,0,0,.8);}

/* ── Shared components (previously duplicated inline on every page) ── */
html{font-size:var(--fs-root, 16px);}*{box-sizing:border-box;}
body::before{content:'';position:fixed;inset:0;background-image:radial-gradient(circle,rgba(var(--accent-rgb),.035) 1px,transparent 1px);background-size:32px 32px;pointer-events:none;z-index:0;}
.glow{position:fixed;width:600px;height:600px;background:radial-gradient(circle,rgba(var(--accent-rgb),.07) 0%,transparent 70%);border-radius:50%;top:-250px;left:50%;transform:translateX(-50%);pointer-events:none;z-index:0;}
.brand-footer{position:fixed;left:20px;bottom:12px;font-size:13px;color:var(--muted);opacity:.75;z-index:50;user-select:none;text-decoration:none;transition:opacity .2s;letter-spacing:.02em;}
.brand-footer:hover{opacity:1;}
.brand-footer span{background:linear-gradient(90deg,var(--text),var(--accent));-webkit-background-clip:text;background-clip:text;color:transparent;font-weight:700;}
.card{border:1px solid var(--border);border-radius:var(--radius-3xl);background:linear-gradient(165deg,var(--bg-card) 0%,var(--bg-el) 120%);}
.btn-p{display:inline-flex;align-items:center;gap:8px;background:linear-gradient(135deg,var(--accent-light) 0%,var(--accent) 100%);color:var(--bg);font-weight:600;padding:10px 22px;border-radius:var(--radius-lg);border:none;font-size:var(--fs-base, 16px);cursor:pointer;transition:all .18s;font-family:inherit;}
.btn-p:hover{filter:brightness(1.1);box-shadow:0 0 28px var(--accent-glow);}
.btn-s{background:transparent;color:var(--muted);padding:9px 18px;border-radius:var(--radius-md);border:1px solid var(--border);font-size:var(--fs-base, 16px);cursor:pointer;transition:all .18s;font-family:inherit;display:inline-flex;align-items:center;gap:7px;}
.btn-s:hover{border-color:var(--muted);color:var(--text);}
.inp{background:var(--bg-el);border:1px solid var(--border);border-radius:var(--radius-md);color:var(--text);font-family:var(--font-display);font-size:15px;padding:10px 14px;width:100%;outline:none;transition:border-color .18s;}
.inp:focus{border-color:var(--accent);}
.sel{background:var(--bg-el);border:1px solid var(--border);border-radius:var(--radius-md);color:var(--text);font-family:var(--font-display);font-size:15px;padding:10px 14px;width:100%;outline:none;transition:border-color .18s;}
.sel:focus{border-color:var(--accent);}
.tag{display:inline-flex;align-items:center;gap:5px;padding:3px 11px;border-radius:var(--radius-pill);font-size:var(--fs-xs, 13px);font-weight:500;border:1px solid var(--border);color:var(--muted);}
.tag.live{border-color:var(--pill-border);color:var(--pill-text);background:var(--pill-bg);}
.tag.warn{border-color:rgba(var(--warn-rgb),.4);color:var(--warn);background:rgba(var(--warn-rgb),.08);}
.tag.err{border-color:rgba(var(--error-rgb),.4);color:var(--error-light);background:rgba(var(--error-rgb),.08);}
.toast-stack{position:fixed;bottom:24px;right:24px;display:flex;flex-direction:column;gap:10px;z-index:9999;}
.toast{display:flex;align-items:flex-start;gap:10px;padding:14px 18px;border-radius:var(--radius-xl);border:1px solid;font-size:var(--fs-sm, 14.5px);max-width:400px;animation:slide-in .3s ease;box-shadow:var(--shadow-pop,0 10px 30px rgba(0,0,0,.5));}
.toast.ok{background:rgba(var(--accent-rgb),.15);border-color:rgba(var(--accent-rgb),.4);color:var(--accent);}
.toast.err{background:rgba(var(--error-rgb),.15);border-color:rgba(var(--error-rgb),.4);color:var(--error-light);}
.toast.warn{background:rgba(var(--warn-rgb),.15);border-color:rgba(var(--warn-rgb),.4);color:var(--warn);}
@keyframes slide-in{from{transform:translateX(40px);opacity:0;}to{transform:none;opacity:1;}}
.modal-overlay{position:fixed;inset:0;background:var(--overlay,rgba(0,0,0,.8));backdrop-filter:blur(5px);z-index:1000;display:flex;align-items:center;justify-content:center;padding:24px;}
.modal-box{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-3xl);padding:30px;max-width:920px;width:100%;max-height:92vh;overflow-y:auto;position:relative;box-shadow:var(--shadow-pop,0 25px 60px rgba(0,0,0,.6));}
.modal-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:22px;}
.modal-title{font-size:var(--fs-xl, 21px);font-weight:700;}
.modal-close{background:var(--bg-el);border:1px solid var(--border);color:var(--muted);border-radius:var(--radius-md);width:34px;height:34px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .18s;}
.modal-close:hover{border-color:var(--error);color:var(--error-light);}
.code-block{background:var(--bg-surface-dark,#070b09);border:1px solid var(--border);border-radius:var(--radius-xl);padding:18px;font-family:var(--font-mono);font-size:13px;line-height:1.65;color:var(--code-fg,#a8c4b8);overflow-x:auto;white-space:pre-wrap;word-break:break-all;}
.code-badge{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:var(--radius-sm);font-size:13px;font-weight:600;font-family:var(--font-mono);border:1px solid rgba(var(--accent-rgb),.3);background:rgba(var(--accent-rgb),.08);color:var(--accent);}
.code-badge.cpt{border-color:rgba(var(--warn-rgb),.3);background:rgba(var(--warn-rgb),.08);color:var(--warn);}
.stage-dot.pass{background:var(--accent);}
.code-detail-card{border:1px solid var(--border);border-radius:var(--radius-xl);background:var(--bg-card);padding:14px 18px;margin-bottom:12px;cursor:pointer;transition:border-color .18s, transform .18s;}
.code-detail-card:hover{border-color:rgba(var(--accent-rgb),.4);transform:translateY(-1px);}
.code-hdr{display:flex;align-items:center;gap:10px;}
.code-expand{display:none;margin-top:12px;padding-top:12px;border-top:1px solid var(--border);}
.code-detail-card.open .code-expand{display:block;}
.code-detail-card.open .code-hdr i.fa-chevron-down{transform:rotate(180deg);}
.conf-bar{height:6px;background:var(--border);border-radius:3px;overflow:hidden;margin-top:4px;}
.conf-fill{height:100%;border-radius:3px;transition:width .4s ease;}
.hide{display:none!important;}
.spinner{display:inline-block;width:15px;height:15px;border:2px solid color-mix(in srgb,currentColor 28%,transparent);border-top-color:currentColor;border-radius:50%;animation:spin .7s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}
body{font-family:var(--font-display);background:radial-gradient(ellipse at 20% 0%,rgba(var(--accent-rgb),.07) 0%,transparent 50%),radial-gradient(ellipse at 80% 100%,rgba(var(--accent-rgb),.04) 0%,transparent 50%),var(--bg);color:var(--text);min-height:100vh;margin:0;padding-bottom:50px;}
.btn-mic{display:inline-flex;align-items:center;gap:7px;background:rgba(var(--accent-rgb),.1);color:var(--accent);padding:9px 16px;border-radius:var(--radius-md);border:1px solid rgba(var(--accent-rgb),.3);font-size:var(--fs-base, 16px);cursor:pointer;transition:all .18s;font-family:inherit;}
.btn-mic:hover{background:rgba(var(--accent-rgb),.18);}
@keyframes pulse-ring{0%{box-shadow:0 0 0 0 rgba(var(--error-rgb,239,68,68),.5);}70%{box-shadow:0 0 0 14px rgba(var(--error-rgb,239,68,68),0);}100%{box-shadow:0 0 0 0 rgba(var(--error-rgb,239,68,68),0);}}

/* ── Mode-aware refinements ───────────────────────────────────────── */
::selection{background:rgba(var(--accent-rgb),.28);color:inherit;}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
.inp:focus-visible,.sel:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(var(--accent-rgb),.22);}
input::placeholder,textarea::placeholder{color:var(--muted);opacity:.7;}
.btn-p:focus-visible,.btn-s:focus-visible,.nav-btn:focus-visible{outline-offset:3px;}
.btn-danger{background:rgba(var(--error-rgb),.12);border:1px solid rgba(var(--error-rgb),.35);color:var(--danger-fg,var(--error-light));}
.btn-danger:hover{background:rgba(var(--error-rgb),.22);border-color:rgba(var(--error-rgb),.6);}
.btn-mic.active{background:rgba(var(--error-rgb),.12);color:var(--danger-fg,var(--error-light));border-color:rgba(var(--error-rgb),.4);animation:pulse-ring 1.5s infinite;}

/* Scrollbars follow the theme. */
*{scrollbar-width:thin;scrollbar-color:var(--border) transparent;}

/* Pop-up injected by config/auth.js. */
html .user-menu{box-shadow:var(--shadow-pop,0 20px 50px rgba(0,0,0,.55));}
html .user-menu .um-danger,html .user-menu .um-danger i{color:var(--danger-fg,var(--error-light));}

/* Light / dark toggle (button created by config/theme-switcher.js). */
.theme-toggle{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;flex-shrink:0;padding:0;border-radius:var(--radius-circle);border:1px solid var(--border);background:var(--bg-card);color:var(--muted);cursor:pointer;transition:color var(--transition-base,.2s),border-color var(--transition-base,.2s),background var(--transition-base,.2s);}
.theme-toggle:hover{color:var(--accent);border-color:rgba(var(--accent-rgb),.55);background:rgba(var(--accent-rgb),.08);}
.theme-toggle svg{display:block;}
body:not(:has(.top-nav)) .theme-toggle{position:fixed;top:18px;right:20px;z-index:50;}

/* ── Top navigation ───────────────────────────────────────────────────
   Single source for the bar used on every page:
     [logo]  | page links ……………………… [theme toggle] [avatar] [menu]
   Desktop shows the links inline with an underline on the current page.
   Below 1200px (tablets and phones) the links collapse into a drawer that
   config/nav-menu.js opens from the menu button. The `js-nav` class is
   added by that script, so without JS the links simply stay inline and
   scroll sideways. */
html .top-nav{height:64px;min-height:64px;padding:0 28px;gap:10px;flex-wrap:nowrap;align-items:center;border-bottom:1px solid var(--border);background:color-mix(in srgb,var(--bg) 90%,transparent);backdrop-filter:saturate(1.3) blur(16px);-webkit-backdrop-filter:saturate(1.3) blur(16px);display:flex;position:sticky;top:0;z-index:40;}
.nav-brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--text);flex-shrink:0;}
.nav-brand-logo{width:34px;height:34px;background:linear-gradient(135deg,var(--accent-light),var(--accent));border-radius:9px;display:flex;align-items:center;justify-content:center;color:var(--on-accent,var(--bg));font-size:15px;font-weight:800;box-shadow:0 2px 10px var(--accent-glow);}
.nav-brand-name{font-weight:700;font-size:1.05rem;letter-spacing:-.01em;white-space:nowrap;}
.nav-brand-name span{color:var(--accent);}
.nav-spacer{flex:1 1 auto;min-width:8px;}

/* Base button (also used for page-level actions such as "Back to Dashboard"). */
.nav-btn{display:inline-flex;align-items:center;gap:7px;padding:7px 14px;border-radius:var(--radius-md);border:1px solid var(--border);background:transparent;color:var(--muted);font-size:13px;font-weight:500;line-height:1.2;white-space:nowrap;cursor:pointer;transition:color .18s,background .18s,border-color .18s;font-family:inherit;text-decoration:none;}
.nav-btn:hover{color:var(--text);border-color:rgba(var(--accent-rgb),.45);background:rgba(var(--accent-rgb),.06);}
.nav-btn.active{color:var(--accent);border-color:rgba(var(--accent-rgb),.4);background:rgba(var(--accent-rgb),.08);}
.nav-btn i{width:15px;text-align:center;font-size:13px;flex-shrink:0;}

/* Page links inside the bar: borderless, with an underline marker. */
html .top-nav > div:has(> .nav-btn){display:flex;align-items:center;gap:2px;margin-left:14px;padding-left:18px;border-left:1px solid var(--border);}
html .top-nav .nav-btn{position:relative;border-color:transparent;padding:9px 13px;font-size:14px;}
html .top-nav .nav-btn:hover{background:color-mix(in srgb,var(--text) 6%,transparent);border-color:transparent;color:var(--text);}
html .top-nav .nav-btn.active{background:rgba(var(--accent-rgb),.1);border-color:transparent;color:var(--accent);font-weight:600;}
html .top-nav > div:has(> .nav-btn) .nav-btn.active::after{content:'';position:absolute;left:12px;right:12px;bottom:-13px;height:2px;border-radius:2px;background:var(--accent);}

/* Right-hand cluster: toggle, avatar and menu button share one size. */
html .top-nav .theme-toggle,html .top-nav .user-chip,.nav-burger{width:38px;height:38px;}
.user-chip{display:inline-flex;align-items:center;gap:8px;padding:4px 12px 4px 5px;border-radius:var(--radius-pill);border:1px solid var(--border);background:var(--bg-card);cursor:default;}
.user-avatar{width:26px;height:26px;border-radius:50%;background:linear-gradient(135deg,var(--accent-light),var(--accent));display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:var(--on-accent,var(--bg));}
.user-name{font-size:13px;font-weight:600;}
.user-role{font-size:11px;color:var(--muted);text-transform:capitalize;}
html .top-nav .user-chip{padding:0;gap:0;border-radius:50%;box-sizing:border-box;justify-content:center;}
html .top-nav .user-chip .user-avatar{width:100%;height:100%;font-size:12px;}
html .top-nav > .nav-brand + .nav-btn{margin-left:10px;}
.nav-burger{display:none;align-items:center;justify-content:center;flex-shrink:0;padding:0;border-radius:var(--radius-md);border:1px solid var(--border);background:var(--bg-card);color:var(--text);cursor:pointer;transition:border-color .18s,color .18s,background .18s;}
.nav-burger:hover,.nav-burger[aria-expanded="true"]{color:var(--accent);border-color:rgba(var(--accent-rgb),.55);background:rgba(var(--accent-rgb),.08);}
.nav-burger svg{display:block;}

/* Tighter spacing on mid-width laptops. */
@media (max-width:1320px){
  html .top-nav{padding:0 20px;}
  html .top-nav > div:has(> .nav-btn){margin-left:8px;padding-left:12px;}
  html .top-nav .nav-btn{padding:9px 10px;font-size:13.5px;}
}

/* Tablet & phone: links move into a drawer opened by the menu button. */
@media (max-width:1200px){
  html .top-nav{padding:0 16px;}
  .top-nav.js-nav .nav-burger{display:inline-flex;}
  html .top-nav.js-nav > div:has(> .nav-btn){display:none;}
  html .top-nav.js-nav.nav-open > div:has(> .nav-btn){display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;position:absolute;top:100%;left:0;right:0;margin:0;padding:14px 16px 18px;border-left:0;border-bottom:1px solid var(--border);background:var(--bg-card);box-shadow:var(--shadow-pop,0 20px 50px rgba(0,0,0,.5));max-height:calc(100vh - 64px);overflow-y:auto;}
  html .top-nav.js-nav .nav-btn{padding:12px 14px;font-size:15px;border-radius:var(--radius-lg);}
  html .top-nav.js-nav > div:has(> .nav-btn) .nav-btn.active::after{display:none;}
  html .top-nav.js-nav > div:has(> .nav-btn) .nav-btn.active{box-shadow:inset 3px 0 0 var(--accent);}
  /* No-JS fallback: keep the links reachable as a swipeable second row. */
  html .top-nav:not(.js-nav):has(> div > .nav-btn){flex-wrap:wrap;height:auto;padding-top:8px;padding-bottom:8px;row-gap:6px;}
  html .top-nav:not(.js-nav):has(> div > .nav-btn) > div:has(> .nav-btn){order:3;flex:1 0 100%;margin-left:0;padding-left:0;border-left:0;overflow-x:auto;scrollbar-width:none;}
  html .top-nav:not(.js-nav):has(> div > .nav-btn) .nav-btn{flex-shrink:0;}
}
/* The pinned footer collides with content on narrow screens, so it flows at the end of the page instead. */
@media (max-width:1200px){
  .brand-footer{position:static;display:block;text-align:center;padding:4px 0 18px;opacity:.7;}
}
@media (max-width:640px){
  html .top-nav{gap:8px;}
  html .top-nav.js-nav.nav-open > div:has(> .nav-btn){grid-template-columns:1fr;}
  main.px-6{padding-left:16px;padding-right:16px;}
}
@media (max-width:380px){
  .nav-brand-name{display:none;}
}
/* Buttons: keep wrapped labels centered, and stack settings grids on small screens. */
.btn-p,.btn-s{text-align:center;line-height:1.3;}
@media (max-width:520px){
  html .seg-settings-grid{grid-template-columns:1fr 1fr;}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;}
}


/* ── Tailwind color utilities → theme tokens ──────────────────────────
   The pages use a handful of Tailwind palette classes for status colors.
   Remapping them here keeps them legible in every theme and both modes
   (the `html` prefix beats the rules Tailwind injects at runtime). */
html .text-emerald-300,html .text-emerald-400{color:var(--accent);}
html .text-amber-300,html .text-amber-400{color:var(--warn);}
html .text-red-400{color:var(--error-light);}
html .text-purple-400{color:color-mix(in srgb,#8b5cf6 55%,var(--text));}
html .bg-emerald-500\/10{background-color:rgba(var(--accent-rgb),.1);}
html .bg-amber-500\/10{background-color:rgba(var(--warn-rgb),.1);}
html .bg-purple-500\/10{background-color:color-mix(in srgb,#8b5cf6 12%,transparent);}
html .border-emerald-500\/30{border-color:rgba(var(--accent-rgb),.3);}
html .border-amber-500\/30{border-color:rgba(var(--warn-rgb),.3);}
html .border-amber-500\/40{border-color:rgba(var(--warn-rgb),.4);}
html .border-purple-500\/30{border-color:color-mix(in srgb,#8b5cf6 35%,transparent);}
html .hover\:border-amber-400:hover{border-color:var(--warn);}

/* Toasts sit over page content, so they need an opaque base under the tint. */
html .toast.ok{background:linear-gradient(rgba(var(--accent-rgb),.14),rgba(var(--accent-rgb),.14)),var(--bg-card);}
html .toast.err{background:linear-gradient(rgba(var(--error-rgb),.14),rgba(var(--error-rgb),.14)),var(--bg-card);}
html .toast.warn{background:linear-gradient(rgba(var(--warn-rgb),.14),rgba(var(--warn-rgb),.14)),var(--bg-card);}

/* ═══════════════════════════════════════════════════════════════════════════
   UI POLISH LAYER — presentation only. Kept together so it is easy to review.
   ═══════════════════════════════════════════════════════════════════════════ */

/* 1 ─ Type scale: `.text-2xs` is used across the app but was never defined, so those labels
       silently fell back to the browser default size. Define it as the smallest legible step. */
.text-2xs{font-size:11.5px;line-height:1.35;}

/* 2 ─ Icon + label alignment: the icon sits on the FIRST line when a label wraps (not centred on the block).
       Components are sized by padding only, so flex-start is safe; icon-only controls opt out via .icon-only. */
html .tag,html .code-badge{align-items:flex-start;}
/* Buttons: icon and label flow as ONE centred line of text (icon stays inline with the label), so a label that
   wraps stays centred with the icon on its first line. <button> centres its content vertically by itself;
   anchors styled as buttons keep a small flex rule to do the same. */
html .btn-p,html .btn-s,html .btn-mic{display:inline-block;text-align:center;vertical-align:middle;}
html a.btn-p,html a.btn-s{display:inline-flex;align-items:center;justify-content:center;}
html :is(.btn-p,.btn-s,.btn-mic) > i[class*="fa-"]{line-height:1;vertical-align:-.1em;}
html :is(.btn-p,.btn-s,.btn-mic) > .spinner{vertical-align:-.12em;}   /* measured: centres the loader on the label's cap/x-height middle (was 1.25px low) */
.tag.icon-only,.btn-p.icon-only,.btn-s.icon-only,.code-badge.icon-only{align-items:center!important;justify-content:center;}
.flex.items-center:not(.justify-center):not([class*="w-"]):not([class*="h-"]):not(.icon-only):not(:has(> i[style*="absolute"])):has(> i[class*="fa-"]:first-child){align-items:flex-start;}
:is(.tag,.btn-p,.btn-s,.btn-mic,.code-badge,.toast) > i[class*="fa-"],
.flex.items-center:not(.justify-center):not([class*="w-"]):not([class*="h-"]):not(.icon-only):not(:has(> i[style*="absolute"])) > i[class*="fa-"]:first-child{flex-shrink:0;line-height:inherit;}
/* adornments that are not text-height (spinners, dots, svg, sized icons) stay centred */
:is(.tag,.btn-p,.btn-s,.btn-mic,.code-badge,.toast) > :is(.spinner,svg,img,.stage-dot,i.fa-circle,i[style*="font-size"]),
:is(.tag,.btn-p,.btn-s,.btn-mic,.code-badge) > span:empty{align-self:center;}

/* 3 ─ Select fields: custom chevron with breathing room (native arrow sat flush against the border).
       Colour comes from the theme (--select-arrow). */
html select.sel,html .seg-settings-field select{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-image:var(--select-arrow);background-repeat:no-repeat;background-position:right 16px center;background-size:14px 14px;padding-right:44px;cursor:pointer;}
html select.sel.text-xs,html select.sel.px-2,html select.sel[style*="width"],html .seg-settings-field select{background-position:right 10px center;background-size:12px 12px;padding-right:30px;}
html select.sel:disabled{cursor:not-allowed;}

/* 4 ─ Code cards (ICD-10 / CPT rows): badge, title, pills and chevron share the title's first baseline. */
html .code-hdr{align-items:baseline;}
html .code-hdr > i[class*="fa-"]{flex-shrink:0;}
html .code-hdr > .flex-1{min-width:0;}
html .code-hdr > .code-badge{min-width:68px;justify-content:center;flex-shrink:0;}

/* 5 ─ Top bar: the round user chip must never be squeezed into an oval; burger-less variant fits phones. */
html .top-nav .user-chip{flex-shrink:0;min-width:38px;}
@media (max-width:440px){
  html .top-nav:not(.js-nav){padding-left:16px;padding-right:16px;}
  html .top-nav:not(.js-nav) .nav-brand-name{display:none;}
}

/* 6 ─ Buttons / controls */
.btn-danger{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border-radius:var(--radius-md);font-family:inherit;line-height:1.2;cursor:pointer;white-space:nowrap;transition:background .18s,border-color .18s;}
.btn-danger.text-xs{padding:6px 10px;}
@media (pointer:coarse){html .btn-s,html .btn-p,html .nav-btn,html select.sel,html .inp{min-height:44px;}}

/* 7 ─ Footer wordmark: full opacity so it passes AA contrast (was 3.5:1 in light theme). */
html .brand-footer{opacity:1;}

/* 8 ─ Data tables: hover row, no double rule above the card edge, comfortable edge padding. */
table.data-grid tbody tr{transition:background .15s;}
table.data-grid tbody tr:hover{background:rgba(var(--accent-rgb),.05);}
table.data-grid tbody tr:last-child td{border-bottom:0;}
table.data-grid td:first-child,table.data-grid th:first-child{padding-left:14px;}
table.data-grid td:last-child,table.data-grid th:last-child{padding-right:14px;}
html table.data-grid select.sel{min-width:112px;width:auto;padding-right:30px;background-position:right 9px center;background-size:12px 12px;}

/* 9 ─ Empty state component: icon tile, clear title, muted helper text. */
.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;text-align:center;padding:48px 24px;color:var(--muted);}
.empty-state .empty-icon{width:56px;height:56px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:22px;color:var(--accent);background:rgba(var(--accent-rgb),.08);border:1px solid rgba(var(--accent-rgb),.28);margin-bottom:8px;}
.empty-state .empty-title{font-size:17px;font-weight:700;color:var(--text);}
.empty-state .empty-text{font-size:14px;line-height:1.5;max-width:44ch;}

/* 10 ─ Two-column workspaces: the empty-state placeholder fills its column so both cards end together. */
#result-placeholder,#era-placeholder{flex:1 1 auto;}

/* 11 ─ Chat composer: mic, field and send button share one height; small mono tags stay legible. */
html .agent-tag{font-size:11.5px;}

/* 12 ─ Pre-bill review rows: description takes the free space, pill and button never collide or shrink. */
.hitl-item-row{gap:12px;}
.hitl-item-row > :first-child{min-width:0;flex:1 1 auto;}
.hitl-item-row .tag,.hitl-item-row .btn-danger{flex-shrink:0;}

/* 13 ─ Small controls: comfortable hit areas; table header text on the 11.5px step. */
html .btn-s.text-xs{padding-top:7px;padding-bottom:7px;}
table.data-grid th{font-size:11.5px;}
table.data-grid .link{display:inline-block;padding:6px 4px;}
html :is(.btn-p,.btn-s,.btn-mic) > i[class*="fa-"]{margin-right:.25em;}      /* icon-to-label breathing room (on top of the text space) */
html :is(.btn-p,.btn-s,.btn-mic).icon-only > i[class*="fa-"],html #btn-delete-patient > i{margin-right:0;}
html :is(.btn-p,.btn-s,.btn-mic).icon-only{display:inline-flex;align-items:center;justify-content:center;}   /* icon-only: exact flex centring */
html :is(.btn-p,.btn-s,.btn-mic).icon-only > i[class*="fa-"]{vertical-align:baseline;}
/* Long unbroken values (emails, IDs) wrap inside definition lists instead of widening the page. */
dd,dt{min-width:0;overflow-wrap:anywhere;}

/* ═══════════════════════════════════════════════════════════════════════════
   MODERN SURFACE LAYER — soft elevation, one focus language, smoother motion.
   Presentation only (no markup/behaviour dependencies).
   ═══════════════════════════════════════════════════════════════════════════ */

/* 14 ─ Fields: rounder, calm hover, and the same soft 4px accent ring everywhere (matches the chat composer). */
html .inp,html .sel{border-radius:12px;transition:border-color .18s,box-shadow .18s,background .18s;}
html .inp:hover:not(:disabled):not(:focus),html .sel:hover:not(:disabled):not(:focus){border-color:color-mix(in srgb,var(--accent) 38%,var(--border));}
html .inp:focus,html .inp:focus-visible,html .sel:focus,html .sel:focus-visible{border-color:var(--accent);box-shadow:0 0 0 4px rgba(var(--accent-rgb),.14);outline:none;}

/* 15 ─ Cards: gentle elevation + a faint top highlight instead of a flat outline. */
html .card{box-shadow:inset 0 1px 0 rgba(255,255,255,.04),0 1px 2px rgba(10,30,20,.04),0 18px 40px -26px rgba(10,30,20,.28);}

/* 16 ─ Buttons: tactile feedback (lift on hover, press on click) and a consistent focus ring. */
html .btn-p{box-shadow:0 8px 18px -10px rgba(var(--accent-rgb),.7);transition:transform .12s,box-shadow .2s,filter .2s,opacity .18s;}
html .btn-p:not(:disabled):hover{transform:translateY(-1px);filter:brightness(1.06);box-shadow:0 12px 24px -10px rgba(var(--accent-rgb),.75);}
html .btn-p:not(:disabled):active{transform:translateY(0) scale(.985);box-shadow:0 4px 10px -6px rgba(var(--accent-rgb),.6);}
html .btn-s{transition:background .18s,border-color .18s,color .18s,transform .12s;}
html .btn-s:not(:disabled):hover{background:rgba(var(--accent-rgb),.07);}
html .btn-s:not(:disabled):active{transform:scale(.985);}
html .btn-p:focus-visible,html .btn-s:focus-visible,html .nav-btn:focus-visible{outline:none;box-shadow:0 0 0 4px rgba(var(--accent-rgb),.22);}
html .btn-p:disabled{box-shadow:none;transform:none;}

/* 17 ─ Toasts: glassy card, accent edge, springy entrance. */
html .toast{border-left-width:4px;border-radius:14px;padding:14px 18px 14px 16px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 14px 34px -14px rgba(0,0,0,.4);animation:toast-in .38s cubic-bezier(.2,.9,.3,1.15) both;}
html .toast.ok{border-left-color:var(--accent);}
html .toast.err{border-left-color:var(--error);}
html .toast.warn{border-left-color:var(--warn);}
@keyframes toast-in{from{transform:translateY(14px) scale(.96);opacity:0;}to{transform:none;opacity:1;}}

/* 18 ─ Modals: fade + scale entrance; header and action bar stay in view while the body scrolls. */
.modal-overlay:not(.hide){animation:overlay-in .2s ease both;}
.modal-overlay:not(.hide) .modal-box{animation:modal-pop .26s cubic-bezier(.2,.85,.25,1) both;}
@keyframes overlay-in{from{opacity:0;}to{opacity:1;}}
@keyframes modal-pop{from{opacity:0;transform:translateY(12px) scale(.975);}to{opacity:1;transform:none;}}
.modal-box > .modal-header{position:sticky;top:-30px;z-index:3;margin:-30px -30px 22px;padding:22px 30px 16px;background:color-mix(in srgb,var(--bg-card) 90%,transparent);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid var(--border);}
.modal-box > .flex.justify-end.border-t:last-child{position:sticky;bottom:-30px;z-index:3;margin:22px -30px -30px;padding:16px 30px 20px;background:color-mix(in srgb,var(--bg-card) 92%,transparent);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-top:1px solid var(--border)!important;}

/* 19 ─ Loading: skeleton shimmer + a subtle page entrance. */
.skeleton{border-radius:8px;background:linear-gradient(90deg,var(--bg-el) 25%,rgba(var(--accent-rgb),.09) 37%,var(--bg-el) 63%);background-size:400% 100%;animation:shimmer 1.4s ease infinite;}
@keyframes shimmer{0%{background-position:100% 50%;}100%{background-position:0 50%;}}
main{animation:page-in .42s ease both;}
@keyframes page-in{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}}