/* =========================================================================
   Veradigm surfaces, authored at 1280x880 and scaled by --k.
   FollowMyHealth (phone): the iOS system face, teal #197683 status and nav bar,
   white grouped lists on #F7F7F7 section headers, #E0E0E0 hairlines, teal tab
   bar selection. The figure that matters sits in their grey "Total Due" band.
   Veradigm PM (desktop): Segoe UI, #2F2257 title bar, #322959 rail, #32598E
   panel headers, #DDE6F3 selected row.
   ========================================================================= */
.mk--fmh{
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue",Helvetica,Arial,sans-serif;
  background:
    radial-gradient(900px 520px at 84% 8%, #DDEFF1 0%, rgba(221,239,241,0) 70%),
    linear-gradient(160deg,#F2F6F7 0%,#E8EFF1 100%);
}
.mk--fmh *, .mk--vd *{box-sizing:border-box;}

/* -------------------------------------------------------------- phone shell */
.fph{position:absolute; top:64px; width:376px; height:752px;
  background:#0B0B0D; border-radius:56px; padding:11px;
  box-shadow:0 40px 90px rgba(10,50,58,.22), 0 4px 14px rgba(10,50,58,.10);}
.fph--a{left:176px;}
.fph--b{left:728px;}
.fph__scr{position:relative; width:100%; height:100%; background:#fff; border-radius:46px; overflow:hidden;
  display:flex; flex-direction:column;}
.fph__sb{height:44px; flex:none; display:flex; align-items:center; padding:4px 28px 0; font-size:15px; font-weight:600;
  color:#fff; background:#197683;}
.fph__notch{position:absolute; left:50%; top:9px; transform:translateX(-50%); width:112px; height:29px;
  background:#0B0B0D; border-radius:16px;}
.fph__sig{margin-left:auto; display:flex; align-items:center; gap:6px;}
.fph__sig i{display:block; width:17px; height:11px; border:1.4px solid #fff; border-radius:2px;}
.fph__sig i.w{border:0; width:15px; height:11px;
  background:radial-gradient(circle 3px at 50% 100%, #fff 55%, transparent 56%),
             radial-gradient(circle 7.5px at 50% 100%, transparent 60%, #fff 61%, #fff 74%, transparent 75%),
             radial-gradient(circle 12px at 50% 100%, transparent 62%, #fff 63%, #fff 74%, transparent 75%);}

/* their nav bar: teal, centred white title, text back button */
.fnav{height:48px; flex:none; background:#197683; color:#fff; display:grid; grid-template-columns:1fr auto 1fr;
  align-items:center; padding:0 14px; font-size:16px;}
.fnav b{font-weight:600; font-size:17px;}
.fnav__b{font-size:16px; opacity:.95;}

.fbody{flex:1; overflow:hidden; position:relative; background:#fff;}
.ffeed{position:absolute; left:0; right:0; top:0; display:flex; flex-direction:column;
  transition:transform 1s cubic-bezier(.3,.72,.2,1);}

/* grouped list */
.fhd{background:#F7F7F7; border-top:1px solid #E0E0E0; border-bottom:1px solid #E0E0E0; padding:8px 16px 6px;
  font-size:12px; letter-spacing:.02em; text-transform:uppercase; color:#6D6D72; display:flex; align-items:center;}
.fhd u{margin-left:auto; text-decoration:none; text-transform:none; letter-spacing:0; display:flex; align-items:center; gap:6px;
  color:#197683; font-weight:600; font-size:11.5px;}
.frow{display:flex; align-items:center; gap:12px; padding:11px 16px; border-bottom:1px solid #E0E0E0;}
.frow:last-child{border-bottom:0;}
.frow > div{flex:1; min-width:0;}
.frow b{display:block; font-weight:400; font-size:16.5px; color:#111;}
.frow span{display:block; font-size:12.5px; color:#6D6D72; margin-top:2px;}
.frow i{font-style:normal; color:#C4C4C7; font-size:24px; line-height:1;}
.frow em{font-style:normal; font-size:15px; color:#111; white-space:nowrap;}
.frow--sm b{font-size:15px;}
.frow--doc{padding:12px 16px;}
.frow .fava{margin:0; width:44px; height:44px; border-radius:50%; flex:none; display:flex; align-items:center; justify-content:center;
  font-size:15px; font-weight:600; color:#fff; background:linear-gradient(150deg,#3A8E99,#146570);}
.mk--sm .frow .fava{visibility:visible;}

/* their step dots */
.fstep{display:flex; align-items:center; gap:6px; padding:14px 16px 12px; font-size:13px; color:#6D6D72;}
.fstep i{width:22px; height:4px; border-radius:2px; background:#D5E3E5; display:block;}
.fstep i.on{background:#197683;}
.fstep span{margin-left:8px;}
.fvis{padding:4px 16px 14px;}
.fvis b{display:block; font-size:19px; font-weight:600; color:#111; letter-spacing:-.01em;}
.fvis span{display:block; font-size:13.5px; color:#6D6D72; margin-top:4px;}
.fnote{margin:0; padding:12px 16px 4px; font-size:13px; line-height:1.45; color:#6D6D72;}

/* the Total Due band, straight from their Bills screen */
.ftot{background:#EDEDED; border-top:1px solid #E0E0E0; border-bottom:1px solid #E0E0E0; padding:11px 16px;
  text-align:right; font-size:15px; color:#111;}
.ftot b{font-weight:600; margin-left:4px;}
.fcost .ftot b{color:#197683; font-size:22px; font-weight:700; letter-spacing:-.01em;}

/* the block we add, arriving inside their list */
.fcost{opacity:0; transform:translateY(18px); transition:opacity .55s ease, transform .55s cubic-bezier(.2,.7,.3,1);}
.fcost.on{opacity:1; transform:none;}

.fbtnw{padding:16px 16px 18px; display:flex; gap:10px;}
.fbtn{flex:1; height:46px; border-radius:8px; background:#197683; color:#fff; font-size:16px; font-weight:600;
  display:flex; align-items:center; justify-content:center;}
.fbtn--g{flex:0 0 116px; background:#fff; color:#197683; border:1.5px solid #197683;}

/* tab bar */
.ftabs{height:58px; flex:none; display:flex; background:#F7F7F7; border-top:1px solid #DADADA; padding-bottom:4px;}
.ftabs div{flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
  font-size:10px; color:#8E8E93;}
.ftabs div.on{color:#197683;}
.fic{display:block; width:20px; height:18px; font-style:normal; position:relative; border:1.7px solid currentColor; border-radius:3px;}
.fic--0{border-radius:2px 2px 3px 3px; clip-path:polygon(50% 0,100% 45%,100% 100%,0 100%,0 45%); border-width:0; background:currentColor;}
.fic--2{border-radius:4px;}
.fic--3::before{content:""; position:absolute; left:-1.7px; right:-1.7px; top:-1.7px; height:5px; background:currentColor; border-radius:3px 3px 0 0;}
.fic--4{border:0; background:radial-gradient(circle 2.2px at 3px 50%,currentColor 98%,transparent),
  radial-gradient(circle 2.2px at 10px 50%,currentColor 98%,transparent),radial-gradient(circle 2.2px at 17px 50%,currentColor 98%,transparent);}

.ssdot{display:block; width:11px; height:11px; flex:none;
  background:
    radial-gradient(circle 1.5px at 1.6px 5.5px,#197683 99%,transparent 100%),
    radial-gradient(circle 1.5px at 5.5px 1.6px,#197683 99%,transparent 100%),
    radial-gradient(circle 1.5px at 5.5px 9.4px,#197683 99%,transparent 100%),
    radial-gradient(circle 1.5px at 9.4px 5.5px,#197683 99%,transparent 100%);}
.ssdot--w{background:
    radial-gradient(circle 1.5px at 1.6px 5.5px,#fff 99%,transparent 100%),
    radial-gradient(circle 1.5px at 5.5px 1.6px,#fff 99%,transparent 100%),
    radial-gradient(circle 1.5px at 5.5px 9.4px,#fff 99%,transparent 100%),
    radial-gradient(circle 1.5px at 9.4px 5.5px,#fff 99%,transparent 100%);}

/* ----------------------------------------------- 02 Veradigm PM, desktop */
.mk--vd{background:linear-gradient(160deg,#EEF0F6 0%,#E4E7F0 100%);
  font-family:"Segoe UI",-apple-system,Tahoma,Arial,sans-serif; color:#1f2330;}
.vwin{position:absolute; inset:0; display:grid; grid-template-rows:38px 32px 1fr; background:#fff;}
.vwin__t{background:#2F2257; color:#fff; display:flex; align-items:center; gap:10px; padding-left:14px; font-size:15px; font-weight:600;}
.vwin__t .sp{flex:1;}
.vwin__t .w{width:50px; height:38px; display:flex; align-items:center; justify-content:center; font-weight:400; opacity:.85;}
.vring{width:20px; height:20px; border-radius:50%; flex:none;
  background:conic-gradient(#C0202B 0 18%,#F1584C 18% 40%,#32598E 40% 70%,#F47920 70% 80%,#8E83C2 80% 100%);
  -webkit-mask:radial-gradient(circle,transparent 4.6px,#000 5.2px); mask:radial-gradient(circle,transparent 4.6px,#000 5.2px);}
.vwin__m{background:#F3F3F6; border-bottom:1px solid #D9DAE3; display:flex; align-items:center; gap:22px; padding:0 16px; font-size:14px; color:#2b2d3a;}
.vwin__m .r{margin-left:auto; color:#6b6f80; font-size:13px;}
.vwin__main{display:grid; grid-template-columns:88px 1fr; min-height:0;}
.vrail{background:#322959; display:flex; flex-direction:column; align-items:center; padding-top:10px; gap:4px;}
.vrail div{width:78px; height:64px; border-radius:5px; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:6px; color:#C9C4E3; font-size:12px;}
.vrail i{width:22px; height:19px; border:2px solid currentColor; border-radius:4px; display:block;}
.vrail .on{background:#4A3F7D; color:#fff;}
.vwork{display:grid; grid-template-rows:50px 1fr; min-height:0; background:#F7F8FB;}
.vbar{display:flex; align-items:center; gap:10px; padding:0 16px; background:#EEF0F6; border-bottom:1px solid #D3D6E2; font-size:14px;}
.vbar b{font-size:17px; color:#2F2257; margin-right:10px;}
.vbar .sp{flex:1;}
.vsel{height:30px; border:1px solid #C9CDDD; background:#fff; border-radius:3px; padding:0 26px 0 10px; display:flex; align-items:center;
  position:relative; color:#1f2330;}
.vsel::after{content:""; position:absolute; right:9px; top:11px; border:5px solid transparent; border-top-color:#6b6f80;}
.vbtn2{height:30px; padding:0 14px; border:1px solid #B9BED2; background:linear-gradient(#fff,#EEF0F5); border-radius:3px;
  display:inline-flex; align-items:center; font-size:13.5px; color:#2b2d3a;}
.vbtn2--p{background:#32598E; border-color:#2A4B78; color:#fff; font-weight:600;}
.vcols{display:grid; grid-template-columns:1.02fr 1fr; gap:14px; padding:14px; min-height:0;}
.vpn{background:#fff; border:1px solid #D3D6E2; border-radius:2px;}
.vpn h4{margin:0; background:#32598E; color:#fff; font-size:14px; font-weight:600; padding:7px 12px; display:flex; align-items:center; gap:8px;}
.vpn h4 em{margin-left:auto; font-style:normal; font-weight:400; opacity:.85; display:flex; align-items:center; gap:6px;}
.vpn table{width:100%; border-collapse:collapse;}
.vpn th, .vpn td{padding:9px 10px; text-align:left; border-bottom:1px solid #ECEEF4; font-size:13.5px; white-space:nowrap;}
.vpn th{color:#6b6f80; font-weight:600; background:#F6F7FA; font-size:12.5px;}
.vpn td.t{color:#6b6f80; width:56px;}
.vpn td.v{font-weight:600;}
.vpn td.el{color:#1d6b3a; font-weight:700; text-align:center;}
.vpn tr.sel td{background:#DDE6F3;}
.vst{display:inline-block; padding:1px 7px; border-radius:2px; font-size:12px; font-weight:600; background:#E8E5F3; color:#2F2257;}
.vst--x{background:#EEF0F4; color:#6b6f80;}
.vst--r{background:#FDEBD8; color:#9A4A06;}
.vst--a{background:#E1F1E6; color:#1d6b3a;}
.vst--u{background:#F9E1E0; color:#B3261E;}
.vdet{display:flex; flex-direction:column; gap:12px; min-height:0;}
.vkv{display:grid; grid-template-columns:150px 1fr; margin:0; padding:8px 12px 10px; row-gap:7px; font-size:13.5px;}
.vkv dt{color:#6b6f80;}
.vkv dd{margin:0; font-weight:600; color:#1f2330;}
.vmut{font-weight:400; color:#6b6f80; font-size:12.5px;}
.vok{color:#1d6b3a;}
.vnone{color:#9097A8 !important; font-weight:400 !important; font-style:italic;}
/* the panel we add, in their own panel language */
.vss{border-color:#32598E; opacity:0; transform:translateY(14px); transition:opacity .55s ease, transform .55s cubic-bezier(.2,.7,.3,1);}
.vss.on{opacity:1; transform:none;}
.vss__tot{display:flex; align-items:baseline; margin:0 12px; padding:10px 0; border-top:1px solid #D3D6E2; font-size:15px; color:#2b2d3a;}
.vss__tot b{margin-left:auto; font-size:30px; color:#2F2257; letter-spacing:-.01em;}
.vss__acts{display:flex; gap:8px; padding:0 12px 12px;}

/* rail thumbnails: drop the secondary lines rather than render them at 6px */
.mk--sm .frow span, .mk--sm .fnote, .mk--sm .fhd u, .mk--sm .vmut, .mk--sm .vwin__m .r{visibility:hidden;}